Inherited text-indent value behavior when changing display value from block to inline-block
css, html
Solution
`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.
From the 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`'.
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`.
Problem
Here is my Fiddle: http://jsfiddle.net/xxgkB/ I have a container `<div>` that has one child, a `<p>` 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 */ } ```