Question

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

我试图使用div和相等宽度的内边距创建一个解决方案，但是我之间的间距不大，导致我的最后一个div换行。

* {
    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

当您希望内联块元素不被占用时，您需要在HTML元素之间注释（或删除）空格（或新行）：

<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

这里最干净的解决方案是使用flexbox。当您使用display: inline-block时，您会说“将这些元素渲染为文本块”，以便浏览器正确显示HTML元素之间包含的空白区域。

如果您在容器上设置display: flex，则可以更准确地描述您想要的布局。也就是说，你会说这个容器的直接子节点应该使用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>

四列等宽，0外边距，等内边距

2 个答案: