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

这是我的小提琴：

我有一个容器

，它有一个子容器

为什么将段落的显示值从块更改为内联块时，

文本缩进的值会加倍

HTML：

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

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

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

默认情况下继承文本缩进。当您将
p
元素设置为内联块时，它将成为
div
块的内联格式上下文的第一行的一部分，从而缩进1英寸。然后
p
元素本身从
div
元素继承
text indent
值，使其自身的文本再缩进1英寸

从：

注意：由于“文本缩进”属性继承，当在块元素上指定时，它将影响子代内联块元素。因此，在指定的元素上指定“
display:inline block
”通常是明智的

p
元素文本的第二行似乎也缩进了，因为缩进的是整个
p
元素，而不仅仅是第一行。这说明得更清楚，也更进一步。
@Adrift:没问题：）我恰好擅长回答这样的问题-我倾向于解释性的回答，而不是“我如何在CSS中做到这一点？”（…除非这是一个关于选择器的问题！）.我同意-我对“为什么”比“如何”更感兴趣，但不幸的是，这种方法似乎并不太普遍。。哦，好吧：@漂流：我也注意到了——我想这取决于问题的性质，以及你问谁。请看，并将其与。