Re: block box inside inline box ?

Sigurd Lerstad asked:

> What happens when a block-level element is inside an inline element,
> example:
> 
> <b>
> Outside paragraph
> <p>
> Inside paragraph
> </p>
> </b>
> 
> How are boxes generated for this example?

Let us rename the example elements for clarity and add some text:

<inline>
    Outside paragraph
    <block>
        Inside paragraph
        </block>
    Outside again
</inline>

And I add some rule sets in case anybody is still confused:

inline { display: inline }
block { display: block }

When I think about this example, I imagine anonymous boxes filling all the roles that 
help me to visualize the layout.  I will note the anonymous boxes in pseudo-XML 
examples with the reserved name indicator: "#".

First I need an anonymous block box to contain everything:

<#anonymous-block>
    <inline>
        Outside paragraph
        <block>
            Inside paragraph
            </block>
        Outside again
        </inline>
    </#anonymous-block>

Then I partition the inline element where it must break into separate boxes:

<#anonymous-block>
    <inline>
        Outside paragraph
        </inline>
    <block>
        Inside paragraph
        </block>
    <inline>
        Outside again
        </inline>
    </#anonymous-block>

Finally, I add anonymous block boxes so that there are only blocks in the block context:

<#anonymous-block>
    <#anonymous-block>
        <inline>
            Outside paragraph
            </inline>
        </#anonymous-block>
    <block>
        Inside paragraph
        </block>
    <#anonymous-block>
        <inline>
            Outside again
            </inline>
        </#anonymous-block>
    </#anonymous-block>


For me, at least, it is easier to think about blocks interacting with blocks than to think 
about blocks interacting with inline boxes.  The anonymous boxes, not addressable by 
selectors and therefore unaffected by declarations, have initial values for their 
properties.  In particular, the anonymous boxes have margins, borders, and paddings 
that are all zero.

The last two parts of the example are deceptive because the 'inline' element still 
contains the 'block' element and inheritance will work through this relationship.  
Nevertheless, the example gives a good idea of the boxes generated by the original 
structure.

-- 
Etan Wexler <mailto:ewexler@stickdog.com>

Received on Wednesday, 12 June 2002 17:22:05 UTC