为什么空html元素的行为与包含内容的元素不同？

我想在4行中显示12个方形的

按钮

s，类似于numpad的外观。为了回答这个问题，我将代码片段分成了两行

按钮{
高度：64px；
宽度：64px；
保证金：4倍；
背景颜色：灰色；
}

1.
2.
3.
0
返回

您需要将container div

display

attribute设置为

flex

按钮{
高度：64px；
宽度：64px；
保证金：4倍；
背景颜色：灰色；
}
div{
显示器：flex
}

1.
2.
3.
0
返回

因为默认情况下，

按钮

元素在其

基线

处垂直对齐，这是文本的最后一行或（如果没有内容）下边框，就像在图像中一样

您可以通过添加

垂直对齐：top或任何其他垂直对齐设置


按钮{
高度：64px；
宽度：64px；
保证金：4倍；
背景颜色：灰色；
垂直对齐：顶部；
}

1.
2.
3.
0
返回
请注意，它在Firefox上的行为稍有不同，“0”和“back”位置正确，只有空按钮略为关闭。我认为这将回答您的问题：