鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 為什么div下第一個span元素會有text-indent?

為什么div下第一個span元素會有text-indent?

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是行內(nèi)元素,text-indent不應(yīng)該生效。在chrome和safari下第一個span的text-indent和div一樣,而在firefox下第一個span的text-indent比div要大一些,看起來像是1.5倍左右。

回答
編輯回答
柒槿年

圖片描述

因為對父元素(塊級元素)應(yīng)用了text-indent,text-indent有繼承值,所以span元素也有效。但是,單獨(dú)對span元素設(shè)置text-indent無效,因為它是行內(nèi)元素。https://developer.mozilla.org...

2018年2月20日 17:45
編輯回答
荒城

因為你是給span的父元素設(shè)置的text-indent,父元素是塊級元素,所有父元素里面的子元素span會有效。
你如果單獨(dú)給span就會無效,因為span是行內(nèi)元素。

2018年2月2日 18:20
編輯回答
溫衫

縮進(jìn)只對塊容器盒的第一個格式化的行起作用,里面的div繼承了縮進(jìn)屬性所以他的first-line也會縮進(jìn)
https://www.w3.org/TR/2011/RE...

這里chrome顯示好像更接近規(guī)范,因為中間的div會讓span被包裹進(jìn)匿名塊框中,對匿名塊框來說,他繼承了這個縮進(jìn)屬性,包含塊是menu-items。

2017年8月19日 07:04