Свойство padding. МДН
ЦСС‑свойство padding задаёт внутренние отступы, поля элемента. У падинга есть занимательная особенность — если указать его в процентах, то эти проценты всегда будут рассчитываться от ширины элемента.
Свойство padding. МДН
UPD. В этом совете я упустил важный нюанс: проценты считаются от ширины родителя элемента, а не от ширины самого элемента. Поэтому для работы фишки с падингом понадобится дополнительная обёртка или использование псевдоэлементов ::before или ::after. Простите за это упущение.
Для элемента шириной 100 пк, падинг в 50% будет равен половине ширины — 50 пк:
.example {
width: 100px;
padding-bottom: 50%;
}А падинг 100% даст квадрат 100×100 пк:
.example {
width: 100px;
padding-bottom: 100%;
}При этом ширина самого модуля тоже может быть в процентах, тогда модуль будет тянуться и ужиматься с сохранением пропорций:
Разработчики используют эту особенность падинга для вёрстки пропорциональных модулей.
Допустим, нужен модуль 16:9. Рассчитаем размер падинга:
Подставляем в код, получаем модуль 16:9:
.example {
padding-bottom: 56.25%;
}Есть нюанс: если поместить внутрь такого модуля любое содержимое, то пропорции нарушатся, потому что содержимое увеличит высоту:
.example {
padding-bottom: 56.25%;
}Суть проблемы хорошо видно в инструментах разработчика. Синим подсвечены размеры содержимого, а зелёным — падинг:
Чтобы разместить что‑нибудь внутри и не сломать пропорции, придётся использовать абсолютное позиционирование. Если внутрь нужно поместить несколько элементов, лучше сделать «абсолютную» обёртку, а сами элементы внутри расставлять как в обычной вёрстке, согласно блочной модели:
<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.