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相比，Divs 1和2现在相隔一段距离。当我向最终div添加内容时，情节真的变浓了：

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

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

Answer 1

这种情况正在发生，因为内联块元素的默认vertical-align为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;
}