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)

55 Branch
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 958714

People

(Reporter: karlcow, Unassigned)

References

Details

(Whiteboard: [webcompat] [css] [flexbox])

Attachments

(1 file)

Attached image 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
Flags: webcompat?
Flags: needinfo?(dholbert)
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
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.

Attachment

General

Created:
Updated:
Size: