CODEWITHSUNDEEP
htmlcssbuttonlayout
Vitim.us
Vitim.us

Reputation: 22138

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

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?

screenshot

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

Upvotes: 6

Views: 1536

Answers (5)

Marc Audet
Marc Audet

Reputation: 46785

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:

enter image description here

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/

Upvotes: 7

Vladimir Mikhaylovskiy
Vladimir Mikhaylovskiy

Reputation: 2185

Add this two lines to #tools button

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

Upvotes: 4

LcSalazar
LcSalazar

Reputation: 16831

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 &nbsp; 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...

Upvotes: 0

Nigel B
Nigel B

Reputation: 3597

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.

Upvotes: 0

Varun
Varun

Reputation: 901

In CSS:

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

Upvotes: 0

Related Questions