Question

我有一个容器<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英寸。

来自spec：

注意：由于'text-indent'属性继承，当在块元素上指定时，它将影响后代内联块元素。出于这个原因，通常明智的做法是在指定为“text-indent: 0”的元素上指定“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。

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

1 个答案: