html - 文本缩进对 div 的第一个子 span 元素有影响吗？

Question

这里是代码:https://jsfiddle.net/zz89emkr/1/

.menu-items {
  width: 400px;
  text-indent: 5%;
}    
<div class="menu-items">
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quia maiores voluptatum adipisci iusto perferendis earum quasi, accusamus magni temporibus alias consectetur, provident vel quis nesciunt expedita sit nemo aliquam?</span>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo quas esse eius. Quos atque ea necessitatibus labore est error hic. At quae veritatis sit aperiam debitis animi provident dolorum dolore?</div>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque atque adipisci, fugiat fuga maiores repellendus voluptas non explicabo odio et ut tenetur sint iusto minima unde. Ex, voluptas sed?</span>
</div>

我知道文本缩进不适用于内联元素，但是，在本例中，第一个跨度将获得文本缩进。而且，在 Firefox 中，第一个 span 元素中的文本缩进比 div 元素中的文本缩进要大。

Answer 1

Text-indent has effect on the first child span

不，实际上缩进与span无关。 。因为你已经设置了text-indent在 block 元素上 - .menu-items - 缩进将在之前应用:

1) 容器中的第一个元素/节点 - 无论该元素是否为 inline或block或者该元素是文本还是其他内容(例如图像)以及...

2) 容器中所有后续的 block 级文本元素 (*)(见下文)

.wpr {
  text-indent: 5%;
}

<div class="wpr">
  This is just a regular text node. However, since it's the <strong>first node</strong> in the container - it is indented (due to text-indent being set on the wrapper div)
  <p>This is some block level text - it's indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>
<hr>
<div class="wpr">
  <img src="http://via.placeholder.com/350x150" alt=""> 
  <p>Notice that the image above is indented (it's the first element in the container) This block level text - so it's also indented</p>
  <span>Here is some inline level text</span>
  <div>Here's some more block level text - again, indented</div>
  This text node is <strong>not indented</strong>
</div>

What's more, in firefox, the text-indent in the first span element is larger than that in the div element

首先，Firefox 上的这种差异只能在以下情况下重现:

1)容器元素有一个设定的宽度(小于视口(viewport)宽度)

2) text-indent设置为百分比值

3) 容器中的第一个元素不是 block 级

(所有 3 个条件都出现在您提供的示例 fiddle 中)

这看起来像是一个错误，因为 firefox 将缩进(第一个元素之前)呈现为视口(viewport)宽度的百分比值容器宽度的百分比!

Codepen Demo (在 Firefox 中调整大小即可看到这一点 - 并注意第一行的缩进)

就是那样The spec明确指出(粗体我的):

Percentages: refers to width of containing block

...我想说 Firefox 做错了。

---

(*) 这是我对 spec 中所说内容的理解。 :

Unless otherwise specified by the each-line and/or hanging keywords, only lines that are the first formatted line [CSS21] of an element are affected. For example, the first line of an anonymous block box is only affected if it is the first child of its parent element.

The spec elsewhere详细说明“第一格式化行”的含义:

The "first formatted line" of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first line of the DIV in <DIV><P>This line...</P></DIV> is the first line of the P (assuming that both P and DIV are block-level).