• Теория
  • Теория

Особенности применения width: 100%

В прошлом задании мы разобрались, как работает width: 100%. Теперь давайте разберём один часто встречающийся случай в вёрстке интерфейса.

Представьте, что у нас есть форма, в которой поля должны занимать всю ширину контейнера, но при этом иметь фиксированные внутренние отступы, чтобы текст не прилипал к краям. Форма может быть разной ширины. Для полей такой формы можно задать такие стили:

input[type="text"] {
  width: 100%;
  padding: 0 10px;
}

Ширина 100% заставит поля быть такой же ширины, как родительский блок, а паддинг добавит отступы. Но, как вы уже догадались, за счёт отступов поле станет шире своего контейнера. И эта особенность создаёт проблему.

Давайте проверим, как это работает, на практике.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Блочная модель документа» тренажёра «Боксовая модель и позиционирование» можно после регистрации и оформления подписки.