Игорь!

Выравнивать кнопки и поля по ширине опасно. Во‑первых, такие конструкции выглядят несбалансированными, потому что яркая кнопка перевешивает лёгкое поле ввода. Во‑вторых, их легко спутать с горизонтальной переключалкой, в которой выбран правый пункт:

А вот по высоте кнопки и поля выравнивать нужно. Не случайно в гайдлайнах операционных систем высоте интерфейсных элементов уделяется много внимания.

Нарушать выравнивание кнопок и полей по высоте стоит очень осторожно и отдавая себе отчёт в том, какого эффекта вы хотите достичь. Например, в вашем скриншоте внизу приведена форма калькулятора с промостраницы Шопфанса, которую сделали в бюро. Мы специально сделали все элементы интерфейса разной высоты и формы, чтобы поддержать стиль сервиса и страницы.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.
Отправить
Поделиться
Запинить

Комментарии

Иван Титов

Для верстальщиков дам небольшую подсказку.

Это известная проблема, что у полей ввода есть обводка, а у кнопок нет, поэтому их трудно с ходу выравнять по высоте: получается разница в 2 пикселя (при однопиксельной толщине обводки).

Одно из решений: имитировать border с помощью внутренней тени в 1 пиксель, тогда высота элемента не изменится. Сейчас свойство box‑shadow поддерживают почти все современные браузеры.

17 окт 2018

Рекомендуем похожие советы