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

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

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

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

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