Как задать отступ в CSS как процент от высоты родителя

Быстрый ответ

Для регулировки отступов в дочернем блоке в зависимости от высоты родительского блока, используйте CSS переменные в сочетании с функцией calc():

.parent {
  --percent-height: 10%; /* Процент задается относительно высоты родителя */
  height: 500px; /* Пример установки высоты для родительского блока */
}

.child {
  padding-top: calc(var(--percent-height) * 1); /* Вычисление отступа сверху */
}

С помощью данного подхода отступы будут автоматически корректироваться согласно высоте родительского блока.

Особенность: Преобладание ширины

Важно помнить, что в CSS процентные значения вертикальных отступов связаны с шириной контейнера, а не с высотой.

Хитрость с единицами высоты вьюпорта

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

.child {
  padding-top: 10vh; /* 10% от высоты вьюпорта */
}

Единицы vh привязаны к высоте вьюпорта, а не к родительскому блоку.

Возможности свойства position

Применение position: absolute и свойств top, bottom позволяет установить вертикальные отступы в зависимости от высоты родителя. Установите для родительского элемента position: relative.

Метод с псевдоэлементами

Псевдоэлементы позволяют формировать внешние отступы без необходимости дополнительной разметки:

.parent::before {
  content: '';
  display: block;
  height: 10%; /* Отступ в виде псевдоэлемента */
}

Прелести использования Flexbox

Flexbox упрощает управление промежутками между элементами:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Гармоничное распределение пространства */
}

Точное выравнивание с использованием transform

Применение комбинации position: relative/absolute и transform позволяет точно выровнять элементы:

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Центровка элемента по вертикали */
}

Визуализация

Представьте себя художником, работающим с контейнером:

Размеры холста: 100%
Вы решаете добавить рамку:

"Сделаем рамку шириной в 10% от высоты."

Таким образом, вы создаете внешний отступ вокруг своего произведения:
🖼️[======= 10% ======]

Глубокое понимание размеров в CSS

Для тщательного понимания работы отступов в CSS3 важно осознавать влияние ширины и высоты элементов.

Сохранение пропорций

В адаптивном дизайне очень важно поддерживать соотношение сторон элементов.

Визуальное центрирование

С помощью свойств background-position и padding можно визуально центрировать элементы.

Управление переполнением

Свойство overflow играет ключевую роль в позиционировании элементов, особенно в сочетании с абсолютным или относительным позиционированием.

Преимущества вертикального написания

Вертикальное написание полезно в случае нестандартной компоновки.

Достижение центрирования с помощью трансформации

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Центрирование по обеим осям */
}

Данный код поместит .child в центр родительского элемента.

Полезные материалы

1. CSS values and units – Learn web development | MDN — руководство, подробно объясняющее процентные единицы в CSS.
2. Fun with Viewport Units | CSS-Tricks — обзор использования единиц высоты/ширины вьюпорта в адаптивном дизайне.
3. Sizing with CSS3's vw and vh units – Snook.ca — практики адаптивного дизайна с использованием единиц высоты/ширины вьюпорта.
4. CSS Padding — подробное руководство по отступам в CSS.
5. Responsive Web Design – A List Apart — основная статья о принципах адаптивного веб-дизайна.
6. CSS – why doesn’t percentage height work? – Stack Overflow — обсуждение проблем процентной высоты в CSS.
7. A Visual Guide to CSS3 Flexbox Properties | DigitalOcean — визуальное руководство по свойствам flexbox.