Для процентных значений ширины, отступов и полей действует то же основное правило. При этом безразлично, как объявлены эти величины: как числовые значения или как процентные. Процентные значения могут быть очень полезными. Предположим, требуется, чтобы содержимое элемента занимало две трети ширины блока-контейнера, отступы слева и справа составляли по 5% каждый, поле слева – 5%, а поле справа дополняло оставшееся пространство. Это можно было бы написать примерно так:
<p style="width: 67%; padding-right: 5%; padding-left: 5%; margin-right: auto;
margin-left: 5%;">экспериментируем с процентами</p>
Ширина правого поля составила бы 18% (100% – 67% – 5% – 5% – 5%) ширины блока контейнера. Однако сочетать процентные и числовые значения длины может быть достаточно сложно. Рассмотрим следующий пример:
<p style="width: 67%; padding-right: 2em; padding-left: 2em; margin-right:
auto;
margin-left: 5em;">смешанные единицы задания длины</p>
В этом случае блок элемента может быть определен вот так:
5em + 0 + 2em + 67% + 2em + 0 + auto = ширина блока-контейнера
Чтобы значение правого поля получилось равным нулю, ширина блока-контейнера должна составлять 27.272727em (включая область содержимого элемента шириной 18.272727em). Немного шире – и правое поле будет положительным. Немного уже – и правое поле будет отрицательным. Все еще больше усложняется, если применять разные единицы измерения длин, как в следующем примере:
<p style="width: 67%; padding-right: 15px; padding-left: 10px;
margin-right: auto;
margin-left: 5em;">еще более запутанное задание длины</p>
И чтобы стало понятно, что все еще сложнее: рамки не могут задаваться процентными значениями, а только значениями, выраженными в единицах измерения длины. Итог таков: создать абсолютно гибкую компоновку элемента исключительно с помощью процентных значений нельзя, разве что отказаться от применения рамок.