将显示值从块更改为内联块时继承的文本缩进值行为

Question

这是我的小提琴：http://jsfiddle.net/xxgkB/

我有一个容器<div>，它有一个孩子<p>

为什么将段落的显示值从块更改为行内块时，text-indent 的值会翻倍？

HTML：

<div class=container>
    <p>Example Paragraph</p>
</div>

CSS：

div {
    background: slategray;
    height: 2in;
    text-indent: 1in;
    width: 2in;
}

p {
    display: inline-block; /* Notice the change when removing this declaration */
}

Answer 1

text-indent 默认继承。当您使p 元素成为内联块时，它成为div 块的内联格式化上下文的第一行的一部分，因此缩进1 英寸。然后p 元素本身从div 元素继承text-indent 值，导致它自己的文本再缩进1 英寸。

来自spec：

注意：由于 'text-indent' 属性是继承的，当在块元素上指定时，它将影响后代的 inline-block 元素。因此，在指定为“display:inline-block”的元素上指定“text-indent: 0”通常是明智的。

p 元素文本的第二行似乎也缩进了，因为缩进的是整个p 元素，而不仅仅是第一行。 when you give the p element its own background color 和 when you close the p element and add more text after it into the div 更清楚地说明了这一点。