Горизонтальное форматирование

Горизонтальное форматирование обычно сложнее, чем может показаться на первый взгляд. Частично сложность заключается в том, чтобы понять, что свойство width определяет ширину области содержимого, а не всего видимого блока элемента. Рассмотрим следующий пример:

ширина?



Эта строка кода сделает ширину содержимого абзаца равной 200 пикселам. Задав для элемента фон, это можно было бы увидеть явно. Однако любые определяемые отступы, рамки или поля добавляются к значению ширины. Предположим, есть такая разметка:

ширина?



Видимый блок элемента теперь составляет 220 пикселов в ширину, поскольку справа и слева от содержимого добавлены отступы по 10 пикселов. Затем поля добавят еще по 20 пикселов с каждой стороны, и общая ширина блока элемента составит 260 пикселов. Понимать скрытые дополнения к значению свойства width крайне важно. Большинство пользователей думают, что width определяет ширину видимого блока элемента и что если они объявляют в элементе отступы, рамку и ширину, задаваемое ими значение ширины будет расстоянием от внешнего левого края рамки до внешнего правого края рамки.


В CSS это не так. Твердо запомните это, чтобы избежать неприятностей в будущем.

Следующее простое правило гласит, что сумма размеров горизонтальных компонентов контейнера блочного элемента в нормальном потоке всегда равна значению width его родителя. Возьмем два абзаца, для которых заданы поля в 1em, находящихся в элементе div. Ширина содержимого (значение width) абзаца плюс его левый и правый отступы, рамки и поля всегда наращиваются до значения свойства width области содержимого элемента div. Пусть, скажем, width элемента div равна 30em. Это значит, что общая сумма ширины содержимого, отступов, рамок и полей каждого параграфа составляет 30em. Если бы у элемента div были отступы, пустого пространства было бы еще больше, но здесь их нет. Скоро мы обсудим и отступы.

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

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