На примере элемента <button>
в браузере Chrome - вот как он применяет стили, предопределенные для элементов по умолчанию:
/* 1 */
input, textarea, select, button {
...
text-align: start;
...
}
/* 2 */
input[type="button" i], input[type="submit" i], input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button, button {
...
text-align: center;
...
}
Эти свойства показываются в веб-инспекторе как user agent stylesheet
.
А уж какие именно свойства из встроенной таблицы стилей применяются к определенным элементам, определяет свойство appearance
, то бишь, "внешний вид". Для разных элементов в браузере заданы разные значения этого свойства. Причем его можно переопределить при желании (используя вендорные префиксы, например, -webkit-appearance
), отчего вид элемента по умолчанию меняется.
Добавлено для вертикальной центровки:
На самом деле в <button>
нет никакой "вертикальной центровки", просто при габаритах и шрифте по умолчанию КАЖЕТСЯ, что она есть.
В инлайн-элементах выравнивание происходит по базовой линии шрифта (veritical-align:baseline
), а расстояние между ней и прочими линиями у каждого шрифта разное. И от этих линий пляшут габариты элементов. У некоторых шрифтов это приводит к визуальной похожести на вертикально отцентрированный текст.
На скриншоте я вам соорудил несколько кнопок с разными шрифтами и дефолтным расположением. Какая из них, по-вашему, вертикально отцентрирована? ;)

Вообщем, делал сегодня кнопочки и.....