Странный button

Июнь 11, 2014 ||  css , layout ||  комментарии

Речь пойдет о верстке кнопок. Когда верстаются кнопки обычно делается несколько модификаций, в том числе модификаций размера. Меня сейчас интересуют изменения отступов при изменении размера шрифта кнопки. Так это делается в бутстрапе:

.btn {
    ...
    padding: 6px 12px;
}

.btn-lg {
    ...
    padding: 10px 16px;
}

Мне казалось логично было бы сделать оступы либо высоту кнопки в em поскольку отступы должны зависеть от размера шрифта.

Помимо этого нужно чтобы стили не зависели от html элемента к которому они применяются, то есть они должны работать одинаково на a, button, div. Когда я начал экспериментировать то увидел такую картину:

JS Bin

Справа элемент button, слева a. Оказывается элемент button сам выравнивает текст вертикально. Может это не новость но я не знал.

Еще одна интересная особенность button - элемент включает в свою высоту бордер и отступы, то есть ведет себя как будто для него работает box-sizing: border-box;.

JS Bin Попробуйте расскомментировать строку с box-sizing.

Финальный вариант получился такой:

JS Bin

В нем есть свои минусы, например кнопка не допускает двухстрочной подписи. Можно сделать отступы сверху-снизу в em, просто бывает так что при определенных шрифтах для точного центрирования надо делать разными отсуп снизу и сверху.

comments powered by Disqus