为什么OUT DIV的高度受垂直平均值的影响

Question

在Chrome中，我认为.wrap的高度应为24px。当垂直空间设置为中间时，它是25px。有人可以解释为什么吗？

在本文中回答

body {
  line-height: 1.5;
}
.wrap {
  font-size:16px;  /* 16*1.5= 24 */
}
.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>

Answer 1

在此解释

将元素的中间与基线和一半 父母的X高度。

您的.wrap元素的线路高度默认是从身体继承的1.5，垂直对齐属性将根据您的线路高度呈现，因此，如果行高比包装器元素更大，您会看到效果。为了修复它，只需将行高点放在.wrap类中，您就可以使用它来查看线路高度如何影响垂直对齐。

body {
  line-height: 1.5;
}
.wrap {
  line-height:1;
  background:red;
}
.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>

Answer 2

内联元素（无论出于何种原因）被白色包围。将元素更改为display: block将解决您的问题，但是还有其他方法可以在内联时进行修复。

一种方法是将font-size: 0设置在.wrap元素上，因为空格由字体大小控制。在这种情况下，当您在子公司按钮上设置字体大小时会很好（当您使用em s时，因为它们相对于母体字体大小）。

可以在此处找到更多选项-https：//css-tricks.com/fighting-the-pace-between-inline-block-elements/

Answer 3

解决问题：

仅仅是这样，您就可以得到额外的像素：

body {
    line-height: 1.5;
}

您所有的HTML元素都从身体继承了此属性。

回答问题：

为什么OUT DIV的高度受垂直平均影响

影响

<button>默认显示属性是" Inline-Block"，它会受到白色空间，线路高，字体大小和其他与文本相关的CSS属性的影响。垂直对齐是这些与文本相关的属性之一。例如，如果将按钮的显示更改为"阻止"，则可以看到它不再影响.wrap的高度。

Answer 4

请为BTN

提供块CSS

.btn { display: block;}

为什么块而不是内联块??

内联格式上下文中的元素将导致html中的返回和白色空间的白色空间当想要在"内联"元素上控制边距和填充时，内线块值在不需要block and float上的边距和填充时非常有用。当您使用内联块时到达的一个问题是，html中的空格变成屏幕上的视觉空间。

这不是"错误"（我不认为）。这只是线路上的设置元素的方式。您想在输入的单词之间的空间是空间吗？这些块之间的空间就像单词之间的空间一样。

所以还可以！