Как уже говорилось, значения полей элемента можно задавать в процентах. Процентные значения вычисляются относительно ширины родительского элемента, следовательно, они меняются, если каким-либо образом изменяется ширина родительского элемента. Рассмотрим следующую разметку:
p {margin: 10%;}
<div style="width: 200px; border: 1px dotted;">
<p>This paragraph is contained within a DIV that has a width of 200 pixels,
so its margin will be 10% of the width of the paragraph's parent (the DIV).
Given the declared width of 200 pixels, the margin will be 20 pixels on all
sides.</p>
</div>
<div style="width: 100px; border: 1px dotted;">
<p>This paragraph is contained within a DIV with a width of 100 pixels, so
its margin will still be 10% of the width of the paragraph's parent. There
will, therefore, be half as much margin on this paragraph as that on the
first paragraph.</p>
</div>
Для сравнения рассмотрим случай, когда значение width элементов не объявлено. В таких ситуациях общая ширина блока элемента (включая поля) зависит от значения свойства width родительского элемента. Это может приводить к появлению «нестабильных» страниц, в которых поля элементов подгоняются под фактический размер элемента-родителя (или области отображения). В документе, оформленном таким образом, элементы используют поля, заданные процентными значениями, и при изменении ширины окна броузера пользователем поля будут расширяться или сужаться. Конструктивное решение этой проблемы зависит от вас.
Вы могли обратить внимание на некоторую странность в поведении абзацев. В соответствии с изменениями ширины родительских элементов меняются не только боковые поля, но и поля сверху и снизу. Такого поведения требует CSS. Вернемся к объявлению свойства, и вы увидите, что процентные значения определены относительно ширины родительского элемента. Это также относится и к верхнему и нижнему полям. Таким образом, исходя из следующих стилей и разметки высота верхнего поля абзаца составит 50px:
div p {margin-top: 10%;}
<div style="width: 500px;">
<p>Это параграф, и его верхнее поле составляет 10% ширины его элемента-родителя.</p>
</div>
Если значение width элемента div изменится, изменится также и верхнее поле. Кажется странным? Считаем, что высота большинства элементов в нормальном потоке (как мы предполагаем) такова, чтобы вместить их элементов-потомков, включая поля. Если верхнее и нижнее поля элемента задать как процент от высоты родителя, это может привести к бесконечному циклу: высота родителя увеличивалась бы, что-бы вместить верхнее и нижнее поля, которые затем должны были бы увеличиться соответственно новой высоте и т. д. Вместо того чтобы просто игнорировать процентные значения для верхнего и нижнего полей, авторы спецификации решили соотнести их с шириной родительского элемента, которая не меняется в зависимости от ширины его потомков.
Процентные значения можно сочетать с единицами длины. Таким образом, чтобы задать для элементов h1 верхнее и нижнее поля высотой 0,5 em и боковые поля, составляющие 10% ширины окна броузера, можно объявить следующее:
h1 {margin: 0.5em 10% 0.5em 10%;}
Здесь верхнее и нижнее поля будут оставаться постоянными всегда, а боковые поля будут меняться в зависимости от ширины окна броузера. Конечно, предполагается, что h1 являются дочерними элементами body и что ширина body равна ширине окна броузера. Как указано, боковые поля элементов h1 будут составлять 10% ширины родителя элемента h1. Давайте на мгновение вернемся к этому правилу:
h1 {margin: 0.5em 10% 0.5em 10%;}
Выглядит несколько избыточным, не так ли? Ведь приходится набирать одни и те же пары значений дважды. К счастью, CSS предлагает простой способ избежать этого.