Процентные значения для вертикальных свойств в CSS

Процентные значения в CSS для вертикальных свойств часто вызывают путаницу даже у опытных верстальщиков. Непонимание логики расчёта приводит к ошибкам в позиционировании и нестабильному поведению макета.

Вы разберётесь, как браузер вычисляет проценты для top, bottom, margin и padding в разных условиях. Вы увидите, как заранее прогнозировать результат, учитывать ограничения спецификации и применять такие значения там, где они действительно работают корректно.

Правила расчета процентов для вертикальных элементов

Процентные значения для вертикальных измерений страницы рассчитываются иначе, чем для остальных свойств, принимающих процентные величины.

Правила таковы:

• Процентное значение для top/bottom padding/margin рассчитывается относительно ширины контейнера, куда входит элемент, значение которого пытаются изменить;
• Процентное значение для height рассчитывается относительно высоты контейнера, куда входит элемент, значение которого пытаются изменить (аналогично для min/max height);
• Процентное значение для top и bottom , служащих для позиционирования элемента, рассчитывается относительно высоты контейнера, куда входит элемент, значение которого пытаются изменить;
• Процентное значение нельзя задать для border width (а также, для left и right).

Ниже находится пример с использованием сервиса CodePen, который демонстрирует все вышеперечисленное в действии, используя свойства top/bottom padding/margin заданные в процентах, относительно ширины контейнера:

В примере используется jQuery для вычисления и отображения суммарной высоты элемента вместе с padding. Я намеренно использовал значение 1000px для контейнера, 100 на 100px для самого элемента, чтобы сделать пример нагляднее.

Общая высота составляет 300px, где:

• 100px - собственная высота элемента (определена CSS-свойством);
• 100px – результат задания padding-top:10%, так как ширина контейнера-родителя равна 1000px;
• 100px – результат задания padding-bottom:10% (аналогично top padding).

Всегда помните, что вычисления будут совершенно другими, если я просто помещу содержимое определенных размеров в контейнер-родитель без явного задания его ширины. Тогда ширина этого контейнера будет зависеть от размера окна (или размера iframe, в случае вставленного выше примера).

Также, если бы я использовал box-sizing: border-box, то это тоже повлияло бы на итоговое отображаемое значение высоты.

Почему расчет ведется относительно ширины контейнера?

Размышляя над тем, почему процентные значения для вертикальных свойств padding и margin рассчитываются относительно ширины контейнера-родителя, я пришел к выводу, что причина кроется в простоте контроля.

Значения ширины, как правило, задаются почти всегда, в отличие от значений высот, которые чаще всего зависят от высоты контента. Более того, я бы сказал, что задание высоты элемента это плохая и вредная практика (хотя к min-height это не относится).

Поэтому, если вы вам действительно необходимо задать процентные значения для вертикальных margin/padding, то было бы неразумно рассчитывать их относительно высоты. Гораздо проще сделать это, отталкиваясь от значений ширины — именно по причине того, что ширина часто задается явно.

Сергей Бензенкоавтор-переводчик статьи «Vertical Percentages in CSS»