为什么空按钮不与里面有文本的按钮垂直对齐？

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 个框的行为符合预期，三个字母垂直对齐到一个公共基线。

第三个和第四个按钮没有字符，因此内联框的高度计算为零（行高仅适用于文本）。在第三个按钮中，按钮具有固定高度，因此浏览器将元素垂直对齐到基线，这样高度的一半在基线之上，一半在基线之下。如果height: auto为第 4 个按钮设置，这将更加明显，它将元素缩小到零高度（边框除外），我们看到 0+margin 元素与公共基线对齐。

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

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

所有这些行为都包含在 CSS 规范中：

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

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

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