Bug 242107 – margin collapsing, zero-height line box containing margin-inline

• Status: NEW
• Component: Layout and Rendering

Created attachment 460539 [details]
the two file only change margin-left

Some grammar in webkit and chrome have different display .
When use margin-left:5px.
Chrome and webkit have different display.
Then I see the https://developer.mozilla.org/en-US/docs/Web/CSS/white-space,I think it can not display like br.

WebKitGTK version is 2.36.3

[Sam Sneddon [:gsnedders]]

This is really just:

<div><span style="margin-left: 5px;"></span></div>
<div style="margin-top: 20px;">hello</div>

And the lack of interop is whether the margin of the second div collapses through the first zero-height div into the body.

Relevantly:

> Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

This implies the line box from the span is just a zero-height line box and it does exist for all purposes (because it contains an inline element with a non-zero margin). This then means that the margins cannot be adjoining (as there is a zero-height line box separating them).

We do seem to match Firefox here, which to me makes me wonder if this was a deliberate change in LayoutNG for Chrome…

It might be worth reporting this to Chrome, to see if they believe this is a deliberate change in behaviour and how they justify this v. the spec (or if they've filed an issue I can't find).

[alan]

(In reply to Sam Sneddon [:gsnedders] from comment #1)
> This is really just:
> 
> <div><span style="margin-left: 5px;"></span></div>
> <div style="margin-top: 20px;">hello</div>
> 
> And the lack of interop is whether the margin of the second div collapses
> through the first zero-height div into the body.
> 
> Relevantly:
> 
> > Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
> 
> This implies the line box from the span is just a zero-height line box and
> it does exist for all purposes (because it contains an inline element with a
> non-zero margin). This then means that the margins cannot be adjoining (as
> there is a zero-height line box separating them).
> 
> We do seem to match Firefox here, which to me makes me wonder if this was a
> deliberate change in LayoutNG for Chrome…
> 
> It might be worth reporting this to Chrome, to see if they believe this is a
> deliberate change in behaviour and how they justify this v. the spec (or if
> they've filed an issue I can't find).
I'd think it's just an "inline box" specific bug on their side as if you replace the inline box with a regular (non-inline box) inline level box, vertical margins show as expected.

[Radar WebKit Bug Importer]

<rdar://problem/96508147>