html - 为什么带有内容的 div 在内联 block 中向下移动？

Question

我有 3 个像这样的 div:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

使用以下 CSS:

div {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  width: 100px;
}

当 div 为空时，此代码可以正常工作。所有 div 沿同一水平面对齐。但!当我将任何内容放入 1 或 2 个 div 时，包含内容的 div 会向下移动大约 90% 的高度:

<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>

与通常对齐的 div 3 相比，Div 1 和 2 现在的间距变小了。当我向最后一个 div 添加内容时，情节真的变粗了:

<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>

现在所有三个 div 再次在页面顶部正确对齐。不确定这里发生了什么或正确的解决方法？

Answer 1

发生这种情况是因为默认 vertical-align对于行内 block 元素是 baseline *。

这张图片来自 CSS Tricks有助于演示文本的基线:
如您所见，基线不是文本向下延伸的距离，而是文本对齐的线。与 vertical-align:baseline ，没有内容的 div 与 <div> 创建的基线对齐的内容。

这张图片可以帮助你想象发生了什么(or, you can play with the jsfiddle):

让你所有的<div>的对齐，不管内容，设置vertical-align:top; :

div {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align:top;
}

This article also helps explain vertical-align some more

---

* W3 Specs