Why an empty button does not align vertically with one that has text inside?

Question

I have a toolbar with buttons, some have text in them and others don't. For some reason I don't really understand, they don't vertically align.

Why? and how to fix it?

#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

Vertical alignment of inline elements - why this works the way it does.

Suppose that we have the following HTML (similar to the above):

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

I added two more buttons to illustrate a few concepts.

Let's look at the following CSS rules:

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

Here we have six inline elements, all buttons, forming a line box, shown below:

The browser will compute a height for each inline element and then use the vertical alignment property (baseline by default) to align them with respect to each other.

In the case of the first two boxes and the last two boxes, there is a character content with a specified font-size, 24pt in this example (exept for the 0pt one, which I will explain shortly).

In this case, the 1st, 5th and 6th boxes behave as expected, the three letters are aligned vertically to a common baseline.

The 3rd and 4th buttons do not have a character, so the height of the inline box computes to zero (line-height only applies to text). In the 3rd button, the button has a fixed height so the browser vertically aligns the element to the baseline such that the half the height is above the baseline and half below. This is more obvious if you set height: auto for the 4th button, which will shrink the element to zero height (except for the borders) and we see that the 0+margin element aligns with the common baseline.

To confirm the behavior, consider the 2nd button, which has a character, and height: auto and font-size: 0. In this case, the zero font-size forces the inline box height to shrink to zero, and the height shrinks to zero (and border widths).

So, a button with no text is equivalent to a button with text displayed with a zero font height.

All of this behavior is implied by the CSS specification:

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

You need to read the sections carefully to tease out the implications.

See demo at: http://jsfiddle.net/audetwebdesign/0jm8th00/