我有两个div并排.两者都具有相同的大小和显示：内联块.两者之间的唯一区别是,第一个有一些文本,第二个是空白.
HTML：
<div>1</div> <div></div>
CSS：
div {
display: inline-block;
border: 1px solid black;
width: 50px;
height: 50px;
}
第一个div低于第二个div.
我知道所有可能的修复,例如添加一些文字或& nbsp;到第二个div.当然,添加vertical-align：top也可以解决这个问题.
我想知道的是,有人可以解释一下,为什么一个空白的div具有不同的对齐而不是带有一些文本的div？
解决方法
默认情况下,内联块框垂直对齐,使得内联块框的基线与呈现它的线框的基线对齐.
具有一行文本的内联块框的基线是该行的基线.更一般地说,内联块的基线是它包含的最后一行文本的基线.但这意味着没有包含任何文本的内联块没有基线.
在这种情况下,回退规则会启动,并且内联块框的底部将放置在其线框的基线上.
