Menu
<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.
994
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
Check the style inspector to make sure background-color is not being overridden. You might want to include your stylesheet after bootstrap. Don't load your external script files within divs. That's not necessary, It should either go before the closing body tag or in the head section.
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.
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.
92
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
