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

Для процентных значений ширины, отступов и полей действует то же основное правило. При этом безразлично, как объявлены эти величины: как числовые значения или как процентные. Процентные значения могут быть очень полезными. Предположим, требуется, чтобы содержимое элемента занимало две трети ширины блока-контейнера, отступы слева и справа составляли по 5% каждый, поле слева – 5%, а поле справа дополняло оставшееся пространство. Это можно было бы написать примерно так:

экспериментируем с процентами



Ширина правого поля составила бы 18% (100% – 67% – 5% – 5% – 5%) ширины блока контейнера. Однако сочетать процентные и числовые значения длины может быть достаточно сложно. Рассмотрим следующий пример:

смешанные единицы задания длины



В этом случае блок элемента может быть определен вот так:

5em + 0 + 2em + 67% + 2em + 0 + auto = ширина блока-контейнера

Чтобы значение правого поля получилось равным нулю, ширина блока-контейнера должна составлять 27.272727em (включая область содержимого элемента шириной 18.272727em).


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

еще более запутанное задание длины



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

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

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание