Почему у select высота не суммируется из line-height и padding (на 2px меньше)?

Question

[Вадим Белкин]

Для изменения высоты полей и селектов использую параметры line-height и padding. Для инпутов высота получается равной сумме нижнего и верхнего padding, line-height и толщины рамок. Но для селекта почему то высота на несколько пикселей меньше. В примере одни и те же стили для этих элементов jsfiddle.net/jq9o7byn/4, но у поля высота 42px, а у селекта 40px (В последней версии хрома и мозилы тестировал). Почему так? Какие параметры у селекта на это влияют?

Answer 1

[Андрей]

Никогда об этом не задумывался. Забавно =)
Какие параметры влияют на размер селекта можно глянуть в документации html-css стандартов.
www.w3.org/TR/css3-ui/#default-style-sheet

select[size]
{
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
 display: inline-block;
 height: attr(size,em);
}

Суть в том, что line-height не влияет на высоту селекта, для расчета берется только размер шрифта.
Для одинаковой высоты нужно конкретно указать height: 40px

Кстати, в firefox высота у блоков одинаковая, в вашем примере, наверно формула расчета для высоты селекта отличается в разных браузерах.
Надеюсь помог.

Comments

[Андрей]

Интересно почему разработчики стандартов решили так сделать... Что у них в этот момент в голове было =)