html - CSS :first-letter text-indent not working

Question

我正在了解伪元素 :first-letter 并尝试使用典型的 text-indent 属性和值进行缩进，但它不起作用。文本缩进仅适用于 margin-left。有什么理由吗？

HTML:

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins.
You can also use percentages, but as with text-indent, the percentage is related to
the width of the paragraph’s containing element. Because it’s confusing to calculate
the space above and below a paragraph based on its width, it’s easier to stick with
either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter
and :first-line pseudo-elements (see Figure 6-16). Technically, these aren’t
CSS properties, but types of selectors that determine what part of a paragraph CSS
properties should apply to. With the :first-letter pseudo-element, you can create
an initial capital letter to simulate the look of a hand-lettered manuscript.</p>

CSS:

p:first-letter {
    font-weight: bold;
    color: red;
    text-indent: 2em;
}

结果:https://jsfiddle.net/opshtvdy/

Answer 1

在 :first-letter 上使用 margin-left。

p:first-letter {
	font-weight: bold;
	color: red;
	margin-left: 2em;
}

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,'
  thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph’s containing element. Because it’s confusing to calculate
  the space above and below a paragraph based on its width, it’s easier to stick with either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter and :first-line pseudo-elements (see Figure 6-16).
  Technically, these aren’t CSS properties, but types of selectors that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered
  manuscript.</p>

或 p 本身的文本缩进

p:first-letter {
	font-weight: bold;
	color: red;
}
p {
  text-indent:2em;
  }

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,'
  thought Alice 'without pictures or conversations?'</p>
<p>As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph’s containing element. Because it’s confusing to calculate
  the space above and below a paragraph based on its width, it’s easier to stick with either em or pixel values. CSS also provides a way of formatting just a part of a paragraph by using the :firstletter and :first-line pseudo-elements (see Figure 6-16).
  Technically, these aren’t CSS properties, but types of selectors that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered
  manuscript.</p>