四列等寬，0外邊距，相等內邊距

Question

這是一個分拆Display Table-Cell: Remove Right and Left Border Space?。

我試圖創建一個解決方案使用divs和等寬的內邊距，但我得到不必要的間距導致我的最後一個div換行。

https://jsfiddle.net/kyy7qgLz/1/

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#container { 
    width: 100%; 
    background-color: blue; 
} 
.item { 
    margin-left: 4%; 
    width: 22%; 
    display: inline-block; 
    background-color: red; 
} 
.item:first-of-type { 
    margin-left: 0%; 
} 

<div id="container"> 
    <div class="item"> 
     Text 1 
    </div> 
    <div class="item"> 
     Text 2 
    </div> 
    <div class="item"> 
     Text 3 
    </div> 
    <div class="item"> 
     Text 4 
    </div> 
</div> 

哪裏是多餘行距來自何處，我如何擺脫它？

Answer 1

這裏的乾淨的解決方案是使用Flexbox的。當您使用display: inline-block時，您說「將這些元素渲染爲文本塊」，以便瀏覽器正確顯示您包含在HTML元素之間的空白區域。

如果您在容器上設置了display: flex，您將更準確地描述您打算的佈局。也就是說，你會說這個容器的直接孩子應該使用彈性佈局（而不是用於文本的佈局）。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
#container { 
 
    background-color: blue; 
 
    display: flex; 
 
} 
 
.item { 
 
    margin-left: 4%; 
 
    flex: 1 0 auto; 
 
    background-color: red; 
 
} 
 
.item:first-of-type { 
 
    margin-left: 0%; 
 
}

<div id="container"> 
 
    <div class="item"> 
 
     Text 1 
 
    </div> 
 
    <div class="item"> 
 
     Text 2 
 
    </div> 
 
    <div class="item"> 
 
     Text 3 
 
    </div> 
 
    <div class="item"> 
 
     Text 4 
 
    </div> 
 
</div>

Answer 2

你需要你的HTML元素之間進行評論（或刪除）的空間（或換行）當你想inline-block的元素不被espaced：

<div id="container"> 
    <div class="item"> 
     Text 1 
    </div><!-- 
    --><div class="item"> 
     Text 2 
    </div><!-- 
    --><div class="item"> 
     Text 3 
    </div><!-- 
    --><div class="item"> 
     Text 4 
    </div> 
</div>