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

Question

我写了vertical-align应用于这些框之一的CSS。

然后，仅在一侧指定的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居中居中，而不是基于其父级高度。

如果要基于b的位置垂直对齐a，则必须向b添加垂直对齐属性

.b{
  vertical-align: top;

}

为使笔记更好地理解并更好地理解，您应该在p标签上重置默认边距

p{
  margin:0;
}