Re: CSS 2.1 Block inside inline behaviour

Michael Gannon wrote:
>       <span style="background-color: yellow; color: red">
>             Inline text
>             <span style="display: block">Block level element</span>
>             More inline text
>        </span>
> From looking at the spec again, it seems that background colour isn't
> inherited by default, but it does have an initial value of transparent.

Correct.

> Therefore, the text "Block level element" should have a background of
> yellow, no?

It should have whatever background is under there.  The yellow background will 
be drawn under the boxes generated by the outer <span>.  You may want to put a 
border on said <span> to see what those look like...

As for what the correct rendering is, CSS2.1 section 9.2.1.1 says this:

   When an inline box contains a block box, the inline box (and its inline
   ancestors within the same line box) are broken around the block. The line
   boxes before the break and after the break are enclosed in anonymous boxes,
   and the block box becomes a sibling of those anonymous boxes.

followed by an example.  Then it says:

   Properties set on elements that cause anonymous block boxes to be generated
   still apply to the boxes and content of that element. For example, if a border
   had been set on the BODY element in the above example, the border would be
   drawn around C1 (open at the end of the line) and C2 (open at the start of the
   line).

   Some user agents have implemented borders on inlines containing blocks in
   other ways, e.g. by wrapping such nested blocks inside "anonymous line boxes"
   and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not
   define this behavior, CSS1-only and CSS2-only user agents may implement this
   alternative model and still claim conformance to this part of CSS2.1. This
   does not apply to UAs developed after this specification was released.

IE6 falls under this last paragraph, basically.

-Boris

Received on Friday, 26 August 2005 18:19:26 UTC