为什么div下第一个span元素会有text-indent？

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>

按照我的理解，span是行内元素，text-indent不应该生效。在chrome和safari下第一个span的text-indent和div一样，而在firefox下第一个span的text-indent比div要大一些，看起来像是1.5倍左右。

Answer 1

缩进只对块容器盒的第一个格式化的行起作用，里面的div继承了缩进属性所以他的first-line也会缩进
https://www.w3.org/TR/2011/RE...

这里chrome显示好像更接近规范，因为中间的div会让span被包裹进匿名块框中，对匿名块框来说，他继承了这个缩进属性，包含块是menu-items。

Answer 2

因为你是给span的父元素设置的text-indent，父元素是块级元素，所有父元素里面的子元素span会有效。
你如果单独给span就会无效，因为span是行内元素。

Answer 3

因为对父元素（块级元素）应用了text-indent，text-indent有继承值，所以span元素也有效。但是，单独对span元素设置text-indent无效，因为它是行内元素。https://developer.mozilla.org...