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

Я не думаю, что вы часто используете проценты для высоты или для вертикальных свойств. Даже, честно говоря, сам затрудняюсь сказать, когда я в последний раз использовал процентные значения для верхнего/нижнего поля(margin) или отступа(padding). Даже для высоты, вспоминается лишь 100% значение, но ничего больше.

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

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

• Процентное значение для верхнего/нижнего поля(margin) или отступа(padding) зависит от ширины блока-родителя.
• Процентное значение для высоты элемента зависит от высоты блока-родителя (также для min/max высоты). Кроме этого, если высота элемента-предка, от которого идет расчет, равна auto, и данный элемент не является абсолютно позиционированным (height: проценты), то и высота самого элемента станет равной auto независимо
от указанных процентов.
• Как вы помните, для высоты значение по умолчанию – auto.
• Процентное значение для свойств top и bottom у позиционируемого элемента зависит от высоты блока-родителя.
• Процентные значения нельзя использовать для границ (border)

Ниже приведен пример, где в процентах заданы значения для свойств top/bottom padding/margin у элемента, помещенного в контейнер с фиксированной шириной.

Отметьте, я использую jQuery, чтобы вычислить и показать высоту, включая отступ, элемента. Ширина элемента-родителя (1000px) и отступы(по 100px) у самого элемента заданы предельно просто, чтобы вам легче было представить процесс вычисления вертикальных свойств, чьи значения заданы в процентах.

Как видите, общая высота блока равна 300px, где 100px высота блока и по 100px для верхнего и нижнего отступа (10% от 1000px).

Если ширина блока не задана, то размеры для верхнего/нижнего поля(margin) или отступа(padding) будут зависеть от ширины окна браузера.

Почему зависит от ширины контейнера?

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

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

Конечно, если у кого-нибудь есть более подробное обоснование поведения процентов для вертикальных свойств, оставляйте комментарии.

Источник