test<...">
Geek Answers Handbook

Why is my background color not showing if I have a display: built-in?

<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 is not displayed. If I change the css mapping from a string to a block, it will appear. Why is it not displayed if the display is integrated? I am trying to understand the cause of the problem besides finding a solution.

+8
html css inline
source share
6 answers

Div does not take up space if it is built-in. if you want an inline element that displays as the height of the children, use display: inline-block; .

As for a good discussion, I would trust QuirksMode better than my own. The bottom line is that the inline element does not repel other elements.

+8
source share

The problem is that you have H3 , a blocking element inside an inline element .

You can see what happens to:

 h3 { background-color: inherit; }

or make H3 inline:

 h3 { display: inline; }
+2
source share

If you are trying to create a marker effect, use below:

 <h3><span style="background-color: #555;">test</span></h3>
0
source share

div is a block element by default. Changing the display model of a block element to an inline is not good practice. headers are also block elements. Embedding a block element in an inline element is not valid html. If you need a highlight effect (giving the background color only for text, not the whole element), you need to use a built-in element, such as span .

 <html> <body> <div> <h3><span style="background-color: #555;">test</span></h3> </div> </body> </html>
0
source share

simple solution, it is best in some cases to add some addition to the built-in div containing your title

 <div style="display: inline; background-color: #555; padding:5px;"> <h3>test</h3> </div>
0
source share

The latest version of CSS2.1 has something to say about this:

When an inline field contains a block level block in a stream, an inline block (and its embedded ancestors in one line) is a block level (and any siblings at the block level that are sequential or separated only by folding spaces and / or off-stream elements), breaking the built-in box into two boxes (even if the side is empty), one on each side of the block (s) of the block level. The line of the boxes before the break and after the break is enclosed in anonymous block blocks, and the block level block becomes the anonymous box. When relative positioning affects such an inline block, any resulting translation also affects the level of the block that is contained in the inline window.

In other words, in terms of layout, the inline combination of div and h3 forms an inline block, a block block, and another inline block. Only two built-in blocks accept formatting (i.e. Background color), and the block block does not form any part of the built-in block defined by the div, and therefore takes its default background setting (which is transparent, the color of its block block is displayed through the background )

0
source share

More articles:


All Articles