html - 为什么这些 inline-block 元素在顶部和底部保留空白？

Question

我有一个容器 div，里面有很多子 div。我希望子 div 彼此相邻显示，并在容器宽度不够时进行换行，以便制作网格。

容器具有固定的宽度和高度，子 div 也是如此。这些设置为display: inline-block，并且它们按预期包装。但是，子 div 的顶部和底部会显示一个空格：

代码如下：

.container {
    border: 1px solid #000000;
    margin: 0 auto;
}

.child {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #EEEEEE;
}

...

<div class="container">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   ...
</div>

渲染的输出是这样的：

我也希望它们垂直地贴在一起。

如何在不更改 DOM 的情况下使用 CSS 完成此操作？

标签： htmlcss

Answer 1

额外的垂直间距是由行高（浏览器为文本行之间的前导保留的空间）引起的。line-height: 0您可以通过添加到您的.container规则来删除它。

.container {
    border: 1px solid #000000;
    margin: 0 auto;
    line-height: 0;
}

.child {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #EEEEEE;
}

<div class="container">
   <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div>

（font-size: 0也可以，但不太理想，因为如果您的标记更改为包含任何内容，它最终会使文本不可读；至少对于 line-height ，它可以立即在界面中看到存在问题。）