行内块元素之间的垂直空间小于字体答案

【问题标题】：Vertical space between inline-block elements smaller than font行内块元素之间的垂直空间小于字体
【发布时间】：2015-06-11 13:04:29
【问题描述】：

首先，我知道会导致行内块元素之间出现水平空间的字母间距问题。这不是另一个问题。

相反，我有一个高度较小的全宽 inline-block 元素，并且我希望它的下一个邻居直接从下方邻接它，但它们之间总是有一个看起来大约是行高的空间。

我已经尝试了所有我能想到的垂直对齐、字体大小和行高的组合。有没有人有创造性的方法来删除那个空白？

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

<div class="blue"></div>
<div class="red"></div>

【问题讨论】：

标签： html css

【解决方案1】：

父元素的font-size，在本例中为body，会影响inline-block div，本质上将它们视为文本。

在此示例中，父元素 body 被指定为 font-size: 0，然后您可以为子元素指定 font-size：

body {
font-size: 0;
}
.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

<div class="blue"></div>
<div class="red"></div>

我想不出这个的实际用途，使用display: block。

【讨论】：

【解决方案2】：

让它们浮起来？

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
  float:left;
}

<div class="blue"></div>
<div class="red"></div>

【讨论】：

【解决方案3】：

如果你想使用 100% 宽度，那么为什么不使用 display: block 而不是 inline-block。

注意：如果你想使用浮点数，最好在之后清除它。使用 float 时，不需要 display 属性，因为 Float 会处理它。

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  height:5px;
  display: block;
}

<div class="blue"></div>
<div class="red"></div>

【讨论】：