内联块垂直对齐中间额外间距问题 [英] Inline-block vertical-align middle extra spacing issue

问题描述

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

我的问题是为什么父元素（block，inline-block或table）当inline-block带有 vertical-align：middle ？

时，会有额外的垂直间距这个问题没有 float 或 flexbox ？感谢。

  $（'span'）。after（$（' 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>  

解决方案

此接缝修复问题

  $（'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>  

Line-height is 24px, but the parent element now have 25px height.

My question is why the parent element (block, inline-block or table) will have a extra vertical spacing when a inline-block come with vertical-align: middle?

How can i fixed this issue without float or flexbox? Thanks.

$('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>

解决方案

This seams to fix the issue

$('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>

这篇关于内联块垂直对齐中间额外间距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！