Why is my background color not showing if I have display: inline?

Question

    
       

            
test
       
    <         


        

Answer 1

The latest revision of CSS2.1 has this to say on the matter:

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

In other words, from a layout point of view, the inlined div and h3 combination forms an inline box, a block box and another inline box. Only the two inline boxes take the formatting (i.e. the background-color) and the block box does not form any part of the inline box defined by the div and so takes its default background-color setting (which is transparent, showing through the background color of its containing block box).