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

p {padding: 10%; background-color: silver;}
<div style="width: 200px;">
<p>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.</p>
</div>
<div style="width: 100px;">
<p>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.</p>
</div>

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

Добавлено: 18 Июля 2018 21:00:14 Добавил: Андрей Ковальчук Нравится 0

Добавить