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

Не думаю, что это часто возникающая проблема. Если честно, то не помню, чтобы я когда-нибудь использовал процентное значение для задания свойств top padding/margin или bottom padding/margin. Помню, что использовал строку «height: 100%», но не более того.

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

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

  • Процентное значение для 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, то было бы неразумно рассчитывать их относительно высоты. Гораздо проще сделать это, отталкиваясь от значений ширины — именно по причине того, что ширина часто задается явно.