BelkinVadim
@BelkinVadim
Frontend разработчик

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

Для изменения высоты полей и селектов использую параметры line-height и padding. Для инпутов высота получается равной сумме нижнего и верхнего padding, line-height и толщины рамок. Но для селекта почему то высота на несколько пикселей меньше. В примере одни и те же стили для этих элементов jsfiddle.net/jq9o7byn/4, но у поля высота 42px, а у селекта 40px (В последней версии хрома и мозилы тестировал). Почему так? Какие параметры у селекта на это влияют?
  • Вопрос задан
  • 966 просмотров
Пригласить эксперта
Ответы на вопрос 1
allard
@allard
Серийный программист
Никогда об этом не задумывался. Забавно =)
Какие параметры влияют на размер селекта можно глянуть в документации 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 высота у блоков одинаковая, в вашем примере, наверно формула расчета для высоты селекта отличается в разных браузерах.
Надеюсь помог.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы