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

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元素本身从元素继承text-indent值div，导致它自己的文本再缩进 1 英寸。

从规格：

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

元素文本的第二行p似乎也缩进了，因为缩进的是整个p元素，而不仅仅是第一行。当您为p元素赋予自己的背景颜色时，这一点会更清楚地说明，并且当您关闭p元素并在其后添加更多文本到div.