将显示值从块更改为内联块时，继承文本缩进值行为 [英] Inherited text-indent value behavior when changing display value from block to inline-block

问题描述

以下是我的小提琴： http://jsfiddle.net/xxgkB/

我有一个容器< div> 有一个孩子，一个< p>

I have a container <div> that has one child, a <p>

为什么 text-indent 值在将段落的显示值从块更改为inline-block？

Why does the text-indent value double when changing the display value of the paragraph from block to inline-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 */
}

推荐答案

text-indent 默认继承。当您使 p 元素为内联块时，它将成为 div 块，从而缩进1英寸。 p 元素本身从 div 继承 text-indent $ c>元素，使其自己的文本缩进另一个1英寸。

text-indent is inherited by default. When you make the p element an inline block, it becomes part of the first line of the inline formatting context of the div block, thus becoming indented by 1 inch. The p element itself then inherits the text-indent value from the div element, causing its own text to be indented by another 1 inch.

从 spec ：




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

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 元素，而不仅仅是第一行。这更清楚地说明了当您给予 p 元素时自己的背景颜色，并在关闭 p $ c>元素并在其后添加更多文本到 div 。

The second line of the text of the p element appears to be indented as well, because it's the entire p element that's being indented, and not just the first line. This is more clearly illustrated when you give the p element its own background color, and further when you close the p element and add more text after it into the div.

这篇关于将显示值从块更改为内联块时，继承文本缩进值行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！