Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
297 views
in Technique[技术] by (71.8m points)

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

<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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...