Re: May elements with display:inline contain children with display:block?

Rijk van Geijtenbeek writes:
> 
> On Friday, May 31, 2002 Bert wrote:
> > Steven Pemberton writes:
> 
> >> I read and reread the relevant parts of
> >> http://www.w3.org/TR/REC-CSS2/visuren.html to try and answer this question,
> >> and couldn't find from the text any reason why not. May elements with
> >> display:inline contain children with display:block?
> 
> > Yes, absolutely. I do this occasionally to get a displayed, centered
> > image:
> 
> >     img {display: block; margin: auto}
> >     <p>Some text <img...> more text
> 
> To me this looks like a block-level element nested in a block-level
> element. This produces linebreaks before and after the IMG, and the
> IMG is centered (in MSIE only in Standards mode).

But inside the outer block there is text, which is inline (an
anonymous inline element, in fact). Maybe I should have given this
example:

    <p><em>Some text <img...> more text</em>

There is no difference, except that the inline element is no longer
anonymous.

> 
> But what should happen with the background property of an inline
> element when it has a block-level child? Should this background also
> be applied to the block-level child?

That is a good question. The WG talked about that a few months ago and
decided that it was best when borders, text-decoration, outline and
backgrounds that are set on inline elements do *not* continue
in/around a nested block. (They will resume after the block.)

This should have been written into the CSS3 "Line" module, but it
seems to have been forgotten.

> 
> See this example
> http://rijk.op.het.net/test/inline-in-block.html
> 
> <p style="border: thin solid; margin-top: 2em;">bla <em
> style="background: yellow;">bla <img style="border: thin solid;
> display: block; margin: auto;" src="foo" alt="bar" width="100"
> height="100"> bla</em> bla.</p>
> 
> Mozilla and Opera leave the background transparent for the IMG, while
> MSIE colors it.
> 
> 
> 
> > In HTML it is rare to have blocks inside inlines, but CSS was designed
> > to allow paragraphs interrupted by displayed material, such as quotes.
> > It would probably be a good idea to support that in XHTML:
> 
> >     <p>Some text before the quotation
> >       <blockquote>"A famous quote"</blockquote>
> >       and the text continues.</p>
> 
> Isn't that what we have the 'Q' element for?

I believe there is a semantic difference between Q and BLOCKQUOTE: Q
is for short quotes, those that are typically inline, while BLOCKQUOTE
is for longer quotations, that you expect to be displayed.

> 
> 
> > Or mathematical formulas:
> 
> >     <p>Some text leading to a grand formula,
> >      <math display=block>...</math>
> >      after which the text continues.
> 
> Isn't that what we have the 'inline-block' display value for?

No, inline-block would not break the line and start a new one. Here is
how 'block' looks:


    This is the text leading up to a rather long quotation

        And the quotation itself, which is so long
        that it won't fit on one line, but needs
        about three.

    after which the paragraph continues.


Here is how 'inline-block' looks (assuming some suitable margins and
line heights):


    This is the text leading up to a rather long

               And the quotation itself,
               which is so long that it
               won't fit on one line, but
    quotation  needs about three.           after

    which the paragraph continues.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/INRIA
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 31 May 2002 18:58:37 UTC