font-size changes position of element - html

Question

I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)

Answer 1

The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/

Answer 2

Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>