16
<html>
    <body>
       <div style="display: inline; background-color: #555;">
            <h3>test</h3>
       </div>
    </body>
</html>

Here is my code. I am wondering why my background color isn't showing. If I change css display from inline to block, then it show up. Why is it not showing up if display is inline? I am trying to understand the reason of the problem other than looking for a solution.

user926958
  • 9,355
  • 7
  • 28
  • 33

6 Answers6

13

The div doesn't take up space if it's inline. if you want an inline element that shows as the children's height, then use display: inline-block;.

As for a good discussion, I'd trust QuirksMode's take better than my own. The gist is that an inline element doesn't push other elements out of the way.

fncomp
  • 6,040
  • 3
  • 33
  • 42
  • +1, nice. inline-block is most likely what the OP was wanting. – Joe Sep 16 '11 at 03:41
  • 1
    I am trying to understand the reason of the problem instead of looking for solution. Can you explain more detail about the problem? Do you mean if it's inline, then it cannot detect the width of the h3, so it draw width 0? – user926958 Sep 16 '11 at 03:52
  • I understand it that the element only takes as much space as it needs to show it's `> *` on the same line of e.g. text. Sorry, my knowledge of CSS stops where it no longer helps me style the page properly, but the widget at the bottom of the QuirksMode link should make it pretty easy to understand. – fncomp Sep 16 '11 at 04:20
2

The issue is you have an H3, a blocking element, inside of the inline element.

You can see what's happening with:

h3
{
    background-color: inherit;   
}

or make H3 inline:

h3
{
 display: inline;   
}
Joe
  • 80,724
  • 18
  • 127
  • 145
2

div is a block element by default. Changing display model of a block element to inline is not a good practice. headings are block elements too. Nesting a block element into a inline element is not valid html. If you want a highlighting like effect (giving background color just to text not whole element box) you need to use an inline element like an span.

<html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>
Mohsen
  • 64,437
  • 34
  • 159
  • 186
1

simple solution, best in some cases is to add some padding to the inline div containing your heading

<div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>
Fahad Ur Rehman
  • 348
  • 1
  • 5
  • 18
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).

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

If you are trying to create a highlighter effect use the below instead:

<h3><span style="background-color: #555;">test</span></h3>
Reina
  • 315
  • 1
  • 6
  • 21