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

Question

行高为24px，但父元素现在的高度为25px。

我的问题是当内联块与vertical-align: middle一起出现时，父元素（块，内联块或表）将具有额外的垂直间距？

如何在没有float或flexbox的情况下解决此问题？感谢。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

此接缝可解决问题

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;