css - 为什么垂直对齐应用于其他元素？

Question

我编写的 CSS 将 vertical-align 应用于其中一个框。

然后，只为一侧指定的vertical-align应用于另一元素。

.a {
  height: 75px;
  width: 75px;
  background-color: red;
}

.a,
.b {
  display: inline-block;
}

.a {
  vertical-align: middle; /* vertical-align applied to .a also affects .b */
}

<div class="a"></div>
<div class="b">
  <p>texttttt</p>
</div>

为什么在一侧设置 vertical-align 会影响另一侧？

Answer 1

内联元素的垂直对齐适用于基于彼此对齐内联元素，如您的示例所述 a 将居中在元素 b 不基于它们的中间 parent 高度。

如果您想根据a 位置垂直对齐b，您必须向b 添加垂直对齐属性

.b{
  vertical-align: top;

}

要查看正确的结果并更好地理解它的旁注，您应该重置 p 标签上的默认边距

p{
  margin:0;
}