Html 为什么一个空按钮不能与一个内部有文本的按钮垂直对齐？

我有一个带按钮的工具栏，有些有文本，有些没有。由于某种原因，我不太明白，它们没有垂直对齐

为什么?？如何修复它

#工具{
边框：1px纯黑；
}
#工具按钮{
边框宽度：2倍；
边界样式：开始；
边框颜色：#ccc；
高度：24px；
宽度：24px；
字号：9pt；
}
#工具按钮：激活{
边框样式：插图；
}
按钮。Bl{
字体大小：粗体；
}
巴顿，波{
字体：斜体；
}
按钮B.B4{
背景色：#A00；
文本阴影：0.15em 0.15em#210000；
}
巴顿{
背景色：#F55；
文本阴影：0.15em 0.15em#3F1515；
}

B
我

将这两行添加到

#工具按钮

display: inline-block;
vertical-align: bottom;

在CSS中：

---

添加

垂直对齐：顶部内部
#工具按钮{}
我不知道为什么，但一个快速解决方法是插入一个不间断的空格：

<button class="B4 pallete" title="Dark Red">&nbsp;</button>



尽管CSS解决方案将是推荐的解决方案。
我想弄明白这一点，但还是有些不知所措。。。我肯定这与
线的高度有关，只是还没弄清楚

无论如何，基于RedEyedMonster提出的
解决方案，我提出了一种css方法来识别任何空内容
按钮
，并在其中添加一个空格。。。它解决了这个问题：

button:empty:after {
    content: "\0000a0";
}


编辑

谷歌论坛似乎在处理按钮标签元素上的额外填充…
内联元素的垂直对齐-为什么这样做。

假设我们有以下HTML（与上面类似）：

这里我们有六个内联元素，所有按钮，形成一个行框，如下所示：


浏览器将计算每个内联元素的高度，然后使用“垂直对齐”特性（默认情况下为“基线”）将它们彼此对齐

在前两个框和后两个框中，有一个字符
具有指定字体大小的内容，在本例中为24pt（0pt除外，稍后我会解释）

在本例中，第1、第5和第6个框的行为与预期一致，三个字母为
与公共基线垂直对齐

第三个和第四个按钮没有字符，因此内联框的高度
计算为零（行距仅适用于文本）。在第三个按钮中，按钮
具有固定高度，因此浏览器会将图元与基线垂直对齐，例如
高度的一半高于基线，一半低于基线。这一点更为明显
如果您为第四个按钮设置了高度：自动，这将使元素缩小到
零高度（边框除外），我们看到0+边距元素对齐
使用公共基线

确认行为，考虑第二个按钮，它有一个字符，和<代码>高度：Audio<代码>
和
字体大小：0
。在这种情况下，零字体大小将强制内联框高度为0
收缩到零，高度收缩到零（和边框宽度）

因此，没有文本的按钮相当于文本显示为零的按钮
字体高度

CSS规范暗示了所有这些行为：


你需要仔细阅读这些章节，理清其中的含义

请参见演示：
我也尝试过这个方法，但我不明白为什么它会起作用。我假设这是一个
行高问题
但似乎没有效果…添加
垂直对齐：{bottom | | top}
就足以解决问题，您可以使用
显示{inline | | inline block}
。
<div id="tools">
    <button class="ExA pallete" title="Example Auto">E</button>
    <button class="Ex0 pallete" title="Example Zero">E</button>
    <button class="B4 pallete" title="§4 Dark Red"></button>
    <button class="Bc pallete" title="§c Red"></button>
    <button class="Bl pallete" title="§r Bold">B</button>
    <button class="Bo pallete" title="§r Italic">I</button>
</div>

#tools{ border: 1px solid black; }

button{
    border-width: 2px;
    border-style: outset;
    border-color: #ccc;

    height: 48px;
    width: 48px;

    font-size: 24pt;
    vertical-align: baseline;
}
button:active{
    border-style: inset;
}

button.Bl { font-weight: bold; }
button.Bo { font-style: italic; }
button.B4{
    background-color: #A00;
    text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
    background-color: #F55;
    text-shadow: 0.15em 0.15em #3F1515;
    height: auto;
}
button.ExA {}
button.Ex0 {
    height: auto;
    font-size: 0;
}