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

Question

这是我的 fiddle :http://jsfiddle.net/xxgkB/

我有一个容器 <div>有一个 child ，一个<p>

为什么 text-indent将段落的显示值从 block 更改为内联 block 时值加倍？

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 元素成为内联 block 时，它成为 div block 的内联格式化上下文第一行的一部分，因此缩进 1 英寸。然后，p 元素本身继承了 div 元素的 text-indent 值，导致它自己的文本再缩进 1 英寸。

来自spec :

Note: Since the 'text-indent' property inherits, when specified on a block element, it will affect descendant inline-block elements. For this reason, it is often wise to specify 'text-indent: 0' on elements that are specified 'display:inline-block'.

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 .