我仍然对CSS的display属性的一些基础感到困惑。考虑以下简单的html:
.outer {
background-color: red;
display: inline;
}
.inner {
display: inline;
}
<div class="outer">
<div class="inner">
Some Text
</div>
</div>
然后两个div都显示inline
,您会看到以下内容:
这是我的期望,因为我认为“内联”的含义是对其中包含的所有内容进行“最小包装”。在这种情况下,恰好是包装一个内联div,而该内联div本身只包装了“某些文本”。
但是,如果我现在更改内部div的CSS,使其现在显示为“阻止”,那么我将不再看到任何红色背景色。但为什么? Firefox检查器表明存在外部div,并且其大小与内部div相同(考虑到“最小包装”,我希望这是正确的),但是其背景色不会显示出来。
请让我知道是什么细微的CSS规则导致了这种非直觉的行为。 Here is a codepen处于最终令人困惑的状态。