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

在第一个字母上使用text-indent时，应在p元素本身使用它。你应该在块元素上使用它。您可以详细了解text-indent here

这是你适当的CSS规则的小提琴。 https://jsfiddle.net/opshtvdy/6/

Answer 2

使用margin-left on：first-letter。

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>

CSS：第一个字母的文字 - 缩进不起作用

2 个答案: