Процентные значения и поля

Как уже говорилось, значения полей элемента можно задавать в процентах. Процентные значения вычисляются относительно ширины родительского элемента, следовательно, они меняются, если каким-либо образом изменяется ширина родительского элемента. Рассмотрим следующую разметку:

p {margin: 10%;}

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.



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.




Для сравнения рассмотрим случай, когда значение width элементов не объявлено. В таких ситуациях общая ширина блока элемента (включая поля) зависит от значения свойства width родительского элемента. Это может приводить к появлению «нестабильных» страниц, в которых поля элементов подгоняются под фактический размер элемента-родителя (или области отображения).


В документе, оформленном таким образом, элементы используют поля, заданные процентными значениями, и при изменении ширины окна броузера пользователем поля будут расширяться или сужаться. Конструктивное решение этой проблемы зависит от вас.

Вы могли обратить внимание на некоторую странность в поведении абзацев. В соответствии с изменениями ширины родительских элементов меняются не только боковые поля, но и поля сверху и снизу. Такого поведения требует CSS. Вернемся к объявлению свойства, и вы увидите, что процентные значения определены относительно ширины родительского элемента. Это также относится и к верхнему и нижнему полям. Таким образом, исходя из следующих стилей и разметки высота верхнего поля абзаца составит 50px:

div p {margin-top: 10%;}

Это параграф, и его верхнее поле составляет 10% ширины его элемента-родителя.




Если значение 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 предлагает простой способ избежать этого.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отрицательные и свернутые поля

Вернуться в раздел: CSS / 8. Отступы, рамки и поля