爲什麼在這種情況下在內聯，內聯塊之間顯示不同？

在這段代碼中，div的高度是一行高度。如果第二個跨度顯示是內聯塊，那麼div的高度就是兩行高度。爲什麼在這種情況下在內聯，內聯塊之間顯示不同？

<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline; background: #ff3d00;"></span> 
 
</div> 
 
<hr /> 
 
<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline-block; background: #ff3d00;"></span> 
 
</div>

我怎樣才能使這個節目只有一個行高？

來源

2016-11-10 suyoubi

您可以將font-size：0添加到父div，然後爲child添加所需的font-size。它是由於內嵌塊元素之間的空間而發生的。

<div style="border:1px solid #00b0ff; width:200px; font-size:0"> 
     <span style="width:100%;display: inline-block;background: #00b0ff; font-size:14px;">1</span> 
     <span style="display: inline-block; background: #ff3d00;"></span> 
</div>

來源

2016-11-10 14:32:05 Tatyana

爲什麼空間不內聯塊和內聯元件之間引起了這個？ – suyoubi

有另一種方法來解決這一問題？我希望字體大小可能會繼承 – suyoubi

，因爲只有一系列內嵌塊元素可以像 – Tatyana

如果您可以使用CSS，那麼您可以使用:empty僞類來隱藏空跨度。

span:empty { 
 
    display: none !important; 
 
}

<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline; background: #ff3d00;"></span> 
 
</div> 
 
<hr /> 
 
<div style="border:1px solid #00b0ff; width:200px;"> 
 
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span> 
 
    <span style="display: inline-block; background: #ff3d00;"></span> 
 
</div>

來源

2016-11-10 14:32:15

您限定的第一<span>採取上級元素的寬度（style="width:100%"）的100％。刪除這個和你的<div>將是一線高。

<div style="border:1px solid #00b0ff; width:200px;"> 
 
     <span style="display: inline-block; background: #00b0ff">1</span> 
 
     <span style="display: inline-block; background: #ff3d00;"></span> 
 
    </div>

來源

2016-11-10 14:32:52 kejn

爲什麼在這種情況下在內聯，內聯塊之間顯示不同？

回答

相關問題