Отступы и строковые элементы

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

strong {padding-left: 10px; padding-right: 10px; background: silver;}

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

strong {padding-top: 0.5em; background-color: silver;}

Конечно, высота строки не меняется, но поскольку отступы растягивают фон, он должен быть видимым, правильно? Правильно. Он видимый и перекрывает предыдущие строки – таков ожидаемый результат.

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

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

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