内联块垂直对齐中间额外间距问题答案

【问题标题】：Inline-block vertical-align middle extra spacing issue内联块垂直对齐中间额外间距问题
【发布时间】：2016-06-06 14:52:01
【问题描述】：

Line-height 是 24px，但父元素现在有 25px 高度。

我的问题是为什么父元素（块、内联块或表格）在带有vertical-align: middle 的内联块时会有额外的垂直间距？

如果没有float 或flexbox，我该如何解决这个问题？谢谢。

$('span').after($('.block').css('height'));

body {
  line-height: 24px;
}

.block {
  color: #fff;
  background-color: blue;
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
  background-color: red;
  color: #fff;
  padding-left: .5em;
  padding-right: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  .block
</div>

<span>.block height: </span>

【问题讨论】：

您的内联块与行支柱垂直对齐，内联块之间的空格字符由它们的基线对齐。如何修复它取决于您为什么将这些框的中间垂直对齐，因为在您的示例中这样做的唯一效果是增加行高。

标签： css

【解决方案1】：

这可以解决问题

$('span').after($('.block').css('height'));

body {
  line-height: 24px;
}

.block {
  color: #fff;
  background-color: blue;
  line-height: 1; //remove space
}

.inline-block {
  display: inline-block;
  vertical-align: middle;
  background-color: red;
  color: #fff;
  padding-left: .5em;
  padding-right: .5em;
  line-height: 24px; //set line-height
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  <div class="inline-block">
    .inline-block
  </div>
  .block
</div>

<span>.block height: </span>

【讨论】：

TLDR line-height: 1 解决了这个问题。