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

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

p {padding: 10%; background-color: silver;}

This paragraph is contained within a DIV that has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph's parent element.
Given the declared width of 200 pixels, the padding will be 20 pixels on all
sides.



This paragraph is contained within a DIV with a width of 100 pixels, so
its padding will still be 10% of the width of the paragraph's parent. There
will, therefore, be half as much padding on this paragraph as that on the
first paragraph.




Заметьте, что отступы сверху и снизу равны отступам слева и справа; иначе говоря, процентное значение для верхнего и нижнего отступов вычисляется относительно ширины элемента, а не его высоты. Конечно, вы встречались с этим и раньше – в разделе «Поля», но на это следует обратить внимание еще раз, просто чтобы понять принцип работы.

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

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

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