如果内联块没有内容，为什么它会与顶部对齐？

Question

我有following simple setup：

HTML

<input type=text>
<a></a>
<a>text</a>
<span></span>
<span>text</span>

CSS

input {
    width: 50px;
    height: 25px;
}

span, a {
    display:inline-block;
    width: 50px;
    height: 25px;
    background: green;
    color: white;
}

span {
       background: blue;
}

您可以看到第一个锚元素和第一个span元素与顶部对齐，而第二个锚点和span在与输入相同的基线上对齐。为什么这样？

Answer 1

没有内联子项（包括文本）的内联块的基线是其下边距边缘（如果没有下边距，则为简单的底边）。然后将该基线与文本其余部分的基线对齐。这在section 10 of the spec的最后提到。

Answer 2

没有什么是垂直顶部对齐的，只有内容丢失。如果你使用<a>&nbsp;</a>，一切都会好的 - look here。空内联标记没有基线，因此其底边用于对齐。

您有几种解决方案可以对齐空内联块标记：

• 添加 （他们不再是空的）
• 为BoltClock 建议，在:before
中添加一个不可见的字符
• 更改为vertical-align：bottom