Created attachment 8872866 [details] firefox, safari, opera This is a spin-off of the Web compatibility issue. https://webcompat.com/issues/6942 I created a test https://codepen.io/webcompat/pen/jmgWWa `a` by default is a `display: inline` per user stylesheet. but when the parent element is `display: flex` the `a` becomes a `display: block`. * In Safari/WebKit and Opera/Blink the `margin-top` is being applied. * In Firefox/Gecko, it is not. According to https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top margin-top is A margin relative to the nearest block container's width. https://drafts.csswg.org/css-box-3/#the-margin Percentages: width* of containing block (if the containing block is horizontal, otherwise the height) In the test, the margin-top is 0px. Screenshot from left to right. Firefox, Safari and Opera.
Daniel as it is flexbox, you might want to give it an opinion. In my test, the parent block is 300px and around 120 pixels for the flex case. The margin-top is set to 10% and resolves as 30px in Blink and WebKit and 0px in Gecko. https://codepen.io/webcompat/pen/jmgWWa
See Also: → https://webcompat.com/issues/6942
Whiteboard: [webcompat] [css] [flexbox]
(In reply to Karl Dubost :karlcow from comment #0) > According to https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top > margin-top is A margin relative to the nearest block container's width. > > https://drafts.csswg.org/css-box-3/#the-margin > Percentages: width* of containing block > (if the containing block is horizontal, otherwise the height) There are special more specific rules for resolving percent margins on flex items: https://drafts.csswg.org/css-flexbox-1/#item-margins ...which used to require our behavior, but have since been relaxed to allow *either* behavior (yay) because the Chrome team disagreed with the spec. This is bug 958714.
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
You need to log in before you can comment on or make changes to this bug.