размер шрифта изменяется положение элемента

Question

Я этот список кнопок

HTML:

<button>A</button> 
<button>B</button> 
<button class="special">C</button> 
.... 

CSS:

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

jsfiddle

Теперь то, что я сделал что специальная кнопка имеет больший размер шрифта. Странно то, что увеличение font-size перемещает эту кнопку вверх. Я предполагаю, что все это очень логика, но не могу найти объяснение

Answer 1

Объяснение состоит в том, что кнопки являются встроенным элементом, а текст в кнопке определяет вертикальное выравнивание.

По умолчанию вертикальное выравнивание для встроенных элементов состоит в том, чтобы поместить нижнюю часть символов в базовую строку текста. Если вы посмотрите на кнопки в вашем примере, вы увидите, что нижняя часть символов точно совпадает.

Если добавить текст вокруг кнопок, вы видите, что текст кнопок совпадет с текстом вне кнопки: http://jsfiddle.net/Guffa/q640e8sc/4/

Если указать другой Verical выравнивание для кнопок, они будут выстраиваться по-разному , Если вы, например, используете vertical-align: middle;, кнопки будут располагаться в центре символов, поэтому края кнопок будут выстраиваться в линию: http://jsfiddle.net/Guffa/q640e8sc/5/

Другой способ избежать этого выравнивания состоит в том, чтобы блокировать элементы элементов блока, например используя float: left;. Это приводит к тому, что кнопки выстраиваются в линию, но, разумеется, кнопки будут реагировать по-разному на окружающие элементы: http://jsfiddle.net/Guffa/q640e8sc/6/

Answer 2

Использование вертикального выравнивания (который должен помочь мне исправить это, конечно!):

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

demo

и выровнять текст в середине вы можете использовать высоту линии. demo