Question

我有两行：

<div>
    The first row
</div>
<div>
    The <span class="boxed">second</span> row
</div>

单词“second”在带有填充的黄色框中：

* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
    background: yellow;
    padding: 0.5em;
}

如您所见，我正在使用边框模型。但黄色的盒子没有。或者是吗？

我预计第二行与黄色框一样高，但是没有发生。没有浮动，没有CSS position，但仍然黄色框溢出div。如何让第二个div行包含其中的黄色框？

这里有一个小提琴：http://jsfiddle.net/lborgman/9xEgA/

Answer 1

内联框不受box-sizing的影响，因为它们不会受width和height属性的影响。当你为内联框添加填充时，所有这一切都会导致它们的背景扩展，只推动它们的左右边缘远离周围的内容，而不是它们的顶部和底部边缘（因为线条高度没有改变）。这就是它溢出的原因。有关详细信息，请参阅规范的10.6.1和10.8部分。

如果您想hide the overflow，请使用overflow: hidden：

div { border: 1px solid black; overflow: hidden; }

否则，如果您想要展开第二行以包含黄色框，则可以设置黄色框display: inline-block without any adverse side-effects：

.boxed {
    display: inline-block;
    background: yellow;
    padding: 0.5em;
}

Answer 2

尝试将display: block添加到范围中。当您执行添加填充等操作时，内联块元素有时会以奇怪的方式改变文档流。见updated fiddle

Answer 3

您可以为.boxed范围使用 display：inline-block 属性。

.boxed {
    background: yellow;
    display: inline-block;
    padding: 0.5em;
}

JSFiddle

盒子模型 - 黄色盒子为什么不留在里面？

3 个答案: