ЦСС‑свойство padding задаёт внутренние отступы, поля элемента. У падинга есть занимательная особенность — если указать его в процентах, то эти проценты всегда будут рассчитываться от ширины элемента.


UPD. В этом совете я упустил важный нюанс: проценты считаются от ширины родителя элемента, а не от ширины самого элемента. Поэтому для работы фишки с падингом понадобится дополнительная обёртка или использование псевдоэлементов ::before или ::after. Простите за это упущение.


Для элемента шириной 100 пк, падинг в 50% будет равен половине ширины — 50 пк:

.example {
  width: 100px;
  padding-bottom: 50%;
}

А падинг 100% даст квадрат 100×100 пк:

.example {
  width: 100px;
  padding-bottom: 100%;
}

При этом ширина самого модуля тоже может быть в процентах, тогда модуль будет тянуться и ужиматься с сохранением пропорций:

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

Допустим, нужен модуль 16:9. Рассчитаем размер падинга:

9 / 16 × 100 = 56,25

Подставляем в код, получаем модуль 16:9:

.example {
  padding-bottom: 56.25%;
}

Есть нюанс: если поместить внутрь такого модуля любое содержимое, то пропорции нарушатся, потому что содержимое увеличит высоту:

.example {
  padding-bottom: 56.25%;
}
The quick brown fox jumps over the lazy dog

Суть проблемы хорошо видно в инструментах разработчика. Синим подсвечены размеры содержимого, а зелёным — падинг:

Чтобы разместить что‑нибудь внутри и не сломать пропорции, придётся использовать абсолютное позиционирование. Если внутрь нужно поместить несколько элементов, лучше сделать «абсолютную» обёртку, а сами элементы внутри расставлять как в обычной вёрстке, согласно блочной модели:

<div class="example">
  <div class="example-in">
    <h1 class="example-title">
      Клуб любителей поверстать всякую-всячину
    </h1>
    <p class="example-caption">
      Пожалуйста, соблюдайте масочный режим
    </p>
    <figure class="example-symbol">
      →
    </figure>
  </div>
</div>
.example {
  padding-bottom: 100%;
  position: relative;
}
.example-in {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template: 50% 50% / 50% 50%;
  padding: 27px 18px 45px;
}
.example-title {
  grid-column-start: 1;
  grid-column-end: 3;
}
.example-caption,
.example-symbol {
  grid-row: 2;
  align-self: flex-end;
}
.example-symbol {
  font-size: 140px;
  line-height: 105px;
  font-weight: 300;
  grid-column-start: 2;
  text-align: right;
}

Клуб любителей поверстать всякую‑всячину

Пожалуйста, соблюдайте масочный режим

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

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

Рекомендуем другие советы