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