从块级元素变为内联块级元素时，继承text-indent属性的行为如何？

Question

从块级元素变为内联块级元素时，继承text-indent属性的行为如何？

5

这是我的Fiddle：http://jsfiddle.net/xxgkB/ 我有一个包含一个子元素<p>的容器<div>。

为什么当将段落元素的显示属性从块级改为内联块级时，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 */
}

- Adrift

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

text-indent默认会被继承。当你将p元素设置为内联块时，它就成为div块的内联格式上下文中第一行的一部分，因此缩进了1英寸。p元素本身继承了text-indent值从div元素中，导致其自己的文本再次缩进1英寸。

来自规范:

注意:由于'text-indent'属性会继承，因此在块元素上指定它将影响后代内联块元素。出于这个原因，通常明智的做法是在指定为'display:inline-block'的元素上指定'text-indent:0'。

p元素文本的第二行看起来也缩进了，因为整个p元素被缩进了，而不仅仅是第一行。这在你给p元素设置背景颜色时更加明显，而且在你关闭p元素并在div中添加更多文本之后也更加明显。