发表新帖
发表新帖

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

后端 未结
关注
6 2072
臣服心动
臣服心动 2020-12-11 15:30 

    
       

            
test

       

    <
相关标签:
6条回答
  • 遇见更好的自我
    2020-12-11 15:54

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

    <h3><span style="background-color: #555;">test</span></h3>
    0 讨论(0)
  • 猫巷女王i
    2020-12-11 15:57

    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.

    0 讨论(0)
  • 自闭症患者
    2020-12-11 15:59

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

    0 讨论(0)
  • 既然无缘
    2020-12-11 16:03

    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;   
}
    0 讨论(0)
  • 轮回少年
    2020-12-11 16:16

    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>
    0 讨论(0)
  • 深忆病人
    2020-12-11 16:19

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题