Рамки и строковые элементы

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

strong {border-top: 10px solid gray; border-bottom: 5px solid silver;}

Повторяю, этот синтаксис допускается спецификацией, но абсолютно никак не повлияет на высоту строки. Но поскольку рамки видимые, они будут отрисовываться. Рамки должны были куда-то деться. Вот где они оказались. Опять же все это выполняется только для верха и низа строковых элементов; левая и правая стороны – совсем другое дело. Если задаются рамки слева или справа, они не только будут видимыми, но также раздвинут текст вокруг:

strong {border-left: 25px double gray; background: silver;}

При задании рамок, так же как и полей, любые свойства блоков, указанные для строковых элементов, не влияют напрямую на вычисления броузеров при определении местонахождения разрывов строки.


Единственный эффект – пространство, занимаемое рамками, может немного подвинуть части строки, что, в свою очередь, может изменить местоположение разрыва строки. С рамками CSS связано несколько проблем совместимости.

Самое неприятное заключается в том, что Navigator 4.x не отрисовывает рамку непосредственно вокруг области отступа блочного элемента, а оставляет между отступом и рамкой еще некоторый промежуток. Что касается Navigator 4.x, здесь вообще крайне опасно задавать рамки или любые другие свойства блоков для строковых элементов. Это в той же степени касается и полейпрактически по тем же причинам .

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

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

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