Why does an empty button not align with one that h

Question

I have a toolbar with some buttons, but for some reason I have buttons for colors which doesn't have any text inside the tag, and they don't align with the others.

<div id="tools">
    <button class="B4 pallete" title="Dark Red"></button>
    <button class="Bc pallete" title="Red"></button>
    <button class="Bl pallete" title="Bold">B</button>
    <button class="Bo pallete" title="Italic">I</button>
</div>

http://jsfiddle.net/hjo41wm2/

Why? and how to fix it?

Answer 1

Add this two lines to #tools button

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

Answer 2

In CSS:

Add vertical-align:top; inside #tools button{ }

Answer 3

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/

Answer 4

I don't know why but a quick fix is to insert a non-breaking space:

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

although the CSS solutions would be the recommended way to go.

Answer 5

I'm over my head trying to figure out this one... I'm sure there's something to do with line-height, just couldn't figure it out yet.

Anyway, based on the   solution proposed by RedEyedMonster, I've came up with a css approach to identify any empty content button, and add a white space inside it... It fixes the issue:

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

Updated Fiddle

EDIT

This discussion on Google Forum seems to be dealing with extra padding on button tag elements...