title: display:block inside display:inline
body: <p>I want to understand what happens when an element whose CSS is <code>display:block</code> is a DOM child of an element whose CSS is <code>display:inline</code> (so that the block element is a child of an inline element).</p>
  
  <p>This scenarios is described in the <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level" rel="noreferrer">Anonymous block boxes</a> section for the CSS 2.1 specification: the example includes the following rules ...</p>
  
  <pre><code>body { display: inline }
  p    { display: block }
  </code></pre>
  
  <p>... and the accompanying text says ...</p>
  
  <blockquote>
    <p>The BODY element contains a chunk (C1)
    of anonymous text followed by a
    block-level element followed by
    another chunk (C2) of anonymous text.
    The resulting boxes would be an
    anonymous block box around the BODY,
    containing an anonymous block box
    around C1, the P block box, and
    another anonymous block box around C2.</p>
  </blockquote>
  
  <p>If you have a <code>display:inline</code> parent element, and if this parent has a child that is <code>display:block</code>, then the existence of that child seems to make the parent <strong>nearly</strong> behave like <code>display:block</code>, and ignore the fact that it's defined as <code>display:inline</code> (in that the parent now contains nothing but anonymous and non-anonymous block children, i.e. it no longer contains any inline children)?</p>
  
  <p>My question is, in this scenario (where there's a <code>display:block</code> child) then what are the differences between the parent's being defined <code>display:inline</code> instead of <code>display:block</code>?</p>
  
  <hr>
  
  <p>Edit: I more interested in understanding the CSS 2.1 standard than in how and whether various browser implementations behave in practice.</p>
  
  <hr>
  
  <p>2nd Edit:</p>
  
  <p>There's one difference noted in the spec. In the following document, the border for the 2nd 'block' paragraph surrounds the whole paragraph and the whole width of the page; whereas the border for the 1st 'inline paragraph is around each line (even when there are several lines) within the paragraph and no more than the exact width of each line (with each line being shorter than the page width).</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  p.one 
  {
  border-style:solid;
  border-width:1px;
  display: inline;
  }
  p.two 
  {
  border-style:solid;
  border-width:1px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p class="one"&gt;Some text. &lt;b&gt;Note:&lt;/b&gt; The "border-width"
  property does not work if it is used alone. Use the
  "border-style" property to set the borders first.&lt;/p&gt;
  &lt;p class="two"&gt;Some text.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I add the following style rule ...</p>
  
  <pre><code>b
  {
  display: block;
  }
  </code></pre>
  
  <p>... then the "Note:" in the first inline paragraph becomes a block, which splits the paragraph (according to the specs, the first and last part of the paragraph are now in an anonymous block). However, the border around the first and last part of the paragraph are still 'inline'-style borders: and so, still not the same as if <code>p.one</code> had been declared <code>display:block</code> in the first place.</p>
  
  <p>There's a quote from the spec, which says,</p>
  
  <blockquote>
    <p>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).</p>
  </blockquote>
  
  <p>Is the "border-style" property the only type of property where the difference is visible?</p>