为什么看不到该内联div的背景颜色?

时间:2019-05-04 14:43:51

标签: css

我仍然对CSS的display属性的一些基础感到困惑。考虑以下简单的html:

.outer {
  background-color: red;
  display: inline;
}

.inner {
  display: inline;
}
<div class="outer">
  <div class="inner">
    Some Text
  </div>
</div>

然后两个div都显示inline,您会看到以下内容:

enter image description here

这是我的期望,因为我认为“内联”的含义是对其中包含的所有内容进行“最小包装”。在这种情况下,恰好是包装一个内联div,而该内联div本身只包装了“某些文本”。

但是,如果我现在更改内部div的CSS,使其现在显示为“阻止”,那么我将不再看到任何红色背景色。但为什么? Firefox检查器表明存在外部div,并且其大小与内部div相同(考虑到“最小包装”,我希望这是正确的),但是其背景色不会显示出来。

请让我知道是什么细微的CSS规则导致了这种非直觉的行为。 Here is a codepen处于最终令人困惑的状态。

0 个答案:

没有答案