Html 为什么垂直对齐会影响out div的高度

在chrome中，我认为.wrap的高度应该是24px。 垂直对齐设置为中间时为25px。有人能解释一下原因吗

回答

正文{
线高：1.5；
}
.包裹{
字体大小：16px；/*16*1.5=24*/
}
.btn{
字体大小：14px；
填充：4px；
线高：1；
框大小：边框框；
边框：1px纯蓝色；
垂直对齐：中间对齐；
}

好啊

请为btn提供块CSS

.btn { display: block;}

为什么是块而不是内联块

内联格式上下文中的元素将导致回车中的空格和HTML中的空格 当想要控制“内联”元素的边距和填充，而不需要

对它们进行块和浮动时，内联块值非常有用。使用内联块时出现的一个问题是HTML中的空白变成了屏幕上的可视空间

这不是一个“错误”（我不认为）。这只是在一行上设置元素的方式。您希望键入的单词之间的空格是空格，对吗？这些块之间的空格就像单词之间的空格

所以没关系
 内联元素（无论出于何种原因）被空格包围。
将元素更改为
display:block
将解决您的问题，但在保持其内联的同时，还有其他方法可以解决此问题

一种方法是在
.wrap
元素上设置
字体大小：0
，因为空格由字体大小控制。在这种情况下，在子按钮上设置字体大小就可以了（使用
em
s时要小心，因为它们是相对于父字体大小的）

更多选项可在此处找到-
如前所述

将图元的中间与基线加上半个基线对齐
父对象的x高度

默认情况下，.wrap元素的线条高度为1.5，继承自主体，垂直对齐属性将根据线条高度呈现，因此如果线条高度大于包装元素，您将看到效果。要修复它，只需在.wrap类中添加线条高度，您可以使用它查看线条高度如何影响垂直对齐


正文{
线高：1.5；
}
.包裹{
线高：1；
背景：红色；
}
.btn{
字体大小：14px；
填充：4px；
线高：1；
框大小：边框框；
边框：1px纯蓝色；
垂直对齐：中间对齐；
}

好啊
解决问题：

简单地说，由于以下原因，您将获得额外的像素：

body {
    line-height: 1.5;
}

所有HTML元素都从主体继承此属性

回答问题：

为什么垂直对齐会影响out div的高度

默认显示属性是“inline block”，它受到空格、行高、字体大小和其他与文本相关的CSS属性的影响。垂直对齐是这些文本相关属性之一。例如，如果您将按钮的显示更改为“block”，您可以看到它不再影响
.wrap
的高度。
我知道。但是你能解释一下为什么当.btn是内联块时它是25px，但为什么是25px？14px*1.5=24i已设置框尺寸：边框框；所以它试图将第12个像素与第13个像素对齐？类似这样的。更好地解释了垂直对齐如何移动CSS中的内联框（特别是讨论父块“支柱”的部分）。