margin-top in percent on anchor element when parent element has display: flex

RESOLVED DUPLICATE of bug 958714

Status

()

RESOLVED DUPLICATE of bug 958714
a year ago
a year ago

People

(Reporter: karlcow, Unassigned)

Tracking

55 Branch
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(Not tracked)

Details

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

Attachments

(1 attachment)

(Reporter)

Description

a year ago
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.
(Reporter)

Comment 1

a year 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)
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
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
You need to log in before you can comment on or make changes to this bug.