Re: Question about inline layout and margins

On Tue, Feb 23, 2010 at 12:30 PM, Boris Zbarsky <bzbarsky@mit.edu> 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?

Further confusion:

<!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>

makes Gecko put "Text" flush with the green border.

~TJ

Received on Tuesday, 23 February 2010 18:44:51 UTC