Поля и строковые элементы

Поля могут применяться и в строковых элементах, хотя последствия будут несколько иными. Скажем, требуется задать верхнее и нижнее поля для особо выделяемого текста:

strong {margin-top: 25px; margin-bottom: 50px;}

Это разрешено в спецификации, но поскольку поля применяются к строковому незамещаемому элементу, объявление абсолютно не повлияет на высоту строки. Поскольку поля действительно прозрачные, оно вообще не будет иметь никакого визуального эффекта. Дело в том, что поля строковых незамещаемых элементов не меняют высоты строки элемента. Единственными свойствами, которые могут изменить расстояние между содержащими только текст строками, являются line-height, font-size и vertical-align.

Вышесказанное относится только к верхней и нижней сторонам строковых незамещаемых элементов; левая и правая стороны – совсем другое дело. Для начала рассмотрим простой пример небольшого строкового незамещаемого элемента в рамках единственной строки. Если задать значения левого и правого полей, они будут видимыми:

strong {margin-left: 25px; background: silver;}

Обратите внимание на дополнительное пространство между концом слова прямо перед строковым незамещаемым элементом и краем фона строкового элемента.


Можно добавить дополнительный промежуток с обоих концов строкового элемента:

strong {margin: 25px; background: silver;}

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

strong {margin: 25px; background: silver;}

Левое поле применяется к началу элемента, а правое поле – к его концу. Поля не применяются к левой и правой границам каждой строки. Кроме того, видно, что если бы не поля, разрыв строки был бы размещен после слова «text», а не после «strongly emphasized». Поля влияют на место разрыва строки только тем, что меняют точку начала содержимого элемента в строке. Все становится еще интереснее, если задать для строковых незамещаемых элементов отрицательные поля. Верх и низ элемента не изменяются, это относится и к высоте строк, но левый и правый концы элемента могут перекрывать остальное содержимое:

strong {margin: -25px; background: silver;}

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

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

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

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