Re: Question about inline layout and margins

fantasai wrote:
> 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.

I agree with fantasai's interpretation of what to do, but I prefer the
second option for the placement of the second span and inline box.  Yes,
there's a line break opportunity after the first span, but since the
second span's margin area width is negative, I don't think I'd want that
opportunity to be taken; the second span (and indeed the inline-block)
still fits without widening the line box further.  As  for use cases, I
guess if someone's gone to the trouble of trying to get the second span
to completely overlap the first, it's because that overlap is important
to them, and should be preserved even when the first span overflows its
containing block.

On the other hand it's perhaps undesirable that, in the case that the
first span greatly overflows its containing block (eg consists of a
single long word), creating full overlap via a small negative right
margin on the first span would behave differently (line break) from
creating it via a small negative left margin on the second span (no line
break).  Although, there might be deeper semantics to horizontal margins
than meets the eye.

Either way, this relationship between overflow and fitting needs to be
specified (and be implementable), since currently there's no interop and
browsers don't see to be behaving sensibly, as Boris demonstrates.

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Monday, 9 August 2010 11:37:10 UTC