为什么这个span不继承其父级的填充？

Question

我有这个HTML

<span class="captionsection">Notes: <span class="grey">Lot behind chain-link fence was trimmed and well-maintained.</span></span>

这个css

.captionsection {
padding-top: 5px;
padding-left: 5px;
}

我认为内跨会继承外跨距.captionsection的填充？但这种情况并非如此。 CSS padding keeps inheriting

我该如何解决这个问题？

Answer 1

子元素不会从父元素继承填充。

Answer 2

这不能按预期工作，因为<span>是内联元素。填充不会在其内容的“中间”应用，其中包括文本所包含的位置。

如果您希望在示例中为内容的整个高度保留左边距，则应使用<div>之类的块元素作为.captionsection。

<强> Example fiddle

我还应该提一下，填充不是由你所说的子元素继承（带有“继承”这个词的CSS意思） - 但即使它是，你仍然不会得到预期的左边填充因上述而包装。

Answer 3

首先，填充不是继承的。但是，我相信这不是你的意思，但第二行并没有缩进。

默认情况下，<span>是内联的。这意味着它将首先布局为一行，然后在必要时拆分为行。

这里，填充仅因此而被添加到第一行。

要使其有效，您必须使用block属性将外部范围设为inline-block或display。

Answer 4

使用display: block;否则，span不会继承填充。

CSS：

.captionsection {
    padding-top: 5px;
    padding-left: 5px;
    display: block;
}

小提琴：

http://jsfiddle.net/JmV85/