html - 为什么空按钮不与内部有文本的按钮垂直对齐？

Question

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

为什么？以及如何解决？

#tools{
   border: 1px solid black; 
}

#tools button{
    border-width: 2px;
	border-style: outset;
	border-color: #ccc;
    
	height: 24px;
	width: 24px;
    
	font-size: 9pt;
}
#tools 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;
}

<div id="tools">
    <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>

http://jsfiddle.net/hjo41wm2/

Answer 1

内联元素的垂直对齐 - 为什么会这样。

假设我们有以下 HTML(与上面类似):

<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>

我又添加了两个按钮来说明一些概念。

让我们看看下面的 CSS 规则:

#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;
}

这里我们有六个内联元素，都是按钮，组成一个行框，如下图:

浏览器将计算每个内联元素的高度，然后使用垂直对齐属性(默认为基线)将它们相互对齐。

在前两个框和后两个框的情况下，有一个字符具有指定字体大小的内容，在此示例中为 24pt(0pt 除外，我将在稍后解释)。

在这种情况下，第 1、5 和 6 个框的行为符合预期，三个字母是垂直对齐到公共(public)基线。

第3、4个按钮没有字符，所以行内框的高度计算为零(行高仅适用于文本)。在第三个按钮中，按钮具有固定高度，因此浏览器将元素垂直对齐到基线，例如高度的一半在基线以上，一半在基线以下。这个更明显如果为第 4 个按钮设置 height: auto，这会将元素缩小到零高度(边框除外)，我们看到 0+margin 元素对齐具有共同的基线。

要确认该行为，请考虑第二个按钮，它有一个字符和 height: auto和 font-size: 0。在这种情况下，零字体大小强制行内框高度为收缩为零，高度收缩为零(和边框宽度)。

因此，没有文本的按钮等同于文本显示为零的按钮字体高度。

CSS 规范隐含了所有这些行为:

http://www.w3.org/TR/CSS2/visudet.html#line-height

您需要仔细阅读这些部分以理清其中的含义。

参见演示:http://jsfiddle.net/audetwebdesign/0jm8th00/