5

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 */
}
Adrift
  • 58,167
  • 12
  • 92
  • 90

1 Answers1

12

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    @Adrift: No problem :) I happen to thrive on answering questions like this - I tend to favor expository answers over "how do I do this in CSS?" (... unless it's a question about selectors!). – BoltClock May 03 '13 at 19:44
  • I agree - I'm also more interested in the *why* than the *how* but that approach doesn't seem too pervasive on SO unfortunately .. oh well :] – Adrift May 03 '13 at 19:49
  • 1
    @Adrift: I noticed that too - I guess it depends on the nature of the question, and on whom you ask. See [this question on meta](http://meta.stackexchange.com/questions/165882/appeal-a-not-constructive-question), and compare it with [this discussion](http://meta.stackexchange.com/questions/164436/is-there-a-rule-of-thumb-for-objective-questions-asked-out-of-curiosity). – BoltClock May 03 '13 at 19:53