Closed
Bug 1368918
Opened 7 years ago
Closed 7 years ago
margin-top in percent on anchor element when parent element has display: flex
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 958714
People
(Reporter: karlcow, Unassigned)
References
Details
(Whiteboard: [webcompat] [css] [flexbox])
Attachments
(1 file)
94.76 KB,
image/png
|
Details |
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.
Reporter | ||
Comment 1•7 years ago
|
||
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
Flags: webcompat?
Flags: needinfo?(dholbert)
See Also: → https://webcompat.com/issues/6942
Whiteboard: [webcompat] [css] [flexbox]
Comment 2•7 years ago
|
||
(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
Closed: 7 years ago
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•