嵌入塊中元素的不同邊距

Question

我將div從float:left更改爲inline-block，不知道爲什麼某些div取代了，就像它們有一些不可見的邊框或其他東西一樣。

下面是與float:lefthttps://jsfiddle.net/f7op4dze/

div{ 
    background-color: red; 
    width: calc(25% - 40px); 
    height: 50px; 
    float:left; 
    margin:0 20px; 
} 

這裏有inline-blockhttps://jsfiddle.net/dfdxa5hc/

div{ 
    background-color: red; 
    width: calc(25% - 40px); 
    height: 50px; 
    display:inline-block; 
    margin:0 20px; 
} 

Answer 1

作爲一種可能的選擇來解決這個問題，家長的font-size設置爲0。

section { font-size: 0; } 

可以恢復的子元素的字體：

div { font-size: 16px; } 

演示：https://jsfiddle.net/dfdxa5hc/3/

有關說明和其他可能的解決方案，請參閱我的答案在這裏：

• inline-block boxes not fitting in their container

Answer 2

有一個空格會自動添加內聯元素，該空間也適用於inline-block。

如果標記中的元素之間沒有空白（空格或返回），則內嵌塊元素將被渲染而沒有空格。

做到這一點，仍然維持在最佳的格式最簡單的方法是使用在<div>元素，像這樣之間的註釋標籤： https://jsfiddle.net/orvn/wd0ynq98/2/

<section> 
    <div></div><!-- 
    --><div></div><!-- 
    --><div></div><!-- 
    --><div></div> 
</section> 

Answer 3

有（終於）一CSS only solution to this problem

section { 
    display: table; 
    word-spacing: -2em; 
    width: 100%; 
} 

div { 
    display: inline-block; 
    word-spacing: normal; 
}