Re: Question about inline layout and margins

On 02/23/2010 10:30 AM, Boris Zbarsky wrote:
> Consider the following testcase:
>
> <!DOCTYPE html>
> <div style="width: 100px; border: 1px solid green">
> <span style="margin-right: 200px"></span>
> <span style="margin: 0 -10px">
> <span style="display: inline-block; width: 20px">Text</span>
> </span>
> </div>
>
> What is the correct layout? Right now Opera and Webkit disagree, and
> Webkit has different behavior between standards and quirks mode (looks
> like in quirks it makes the first line 0-height if the line-break comes
> right after the first span). Gecko's behavior matches Webkit's quirks
> mode due to the right margin on that first span being ignored, but if I
> change that it starts to match Opera in the sense that the second span
> is also placed on the first line.
>
> For extra confusion, if I change the testcase like so:
>
> <!DOCTYPE html>
> <div style="width: 100px; border: 1px solid green">
> <span style="margin-right: 200px">X</span>
> <span style="margin: 0 -10px">
> <span style="display: inline-block; width: 20px">Text</span>
> </span>
> </div>
>
> (added an X in the first span) then Gecko and Webkit agree and Opera
> puts "Text" flush with the left border of the div (instead of 10px to
> the left of that) for some reason.
>
> What's the correct layout here and why?

My interpretation would be to have an empty first line, and to put the
inline block on the second line, with Text shifted 10px to the left
of the green line. The first line should have height: it contains an
inline element with a non-zero margin. Alternatively, put all content
on one line, if the UA isn't considering a line break opportunity
between the spans. So Opera and Konqueror seem to have correct behavior.

~fantasai

Received on Friday, 6 August 2010 22:58:27 UTC