Использование специальных стилей

Стили отступов

В приведенном выше примере оформления границы сжимаются вокруг текста, который они охватывают. В большинстве случаев для визуальной привлекательности и удобочитаемости желательно оставлять свободное пространство между текстом и его границей. Это реализуется введением внутри текстового контейнера отступов ( padding ). Отступ является величиной свободного пространства между границами контейнера и вложенным в него контентом.

Отступы добавляются в контейнеры с помощью свойств стиля оформления, показанных в таблице 6.4. Свойство padding задает свободное пространство вдоль всех четырех сторон контейнера; свойства padding-top, padding-right, padding-bottom и padding-left выборочно добавляют отступы к каждой из четырех сторон.

padding
padding-top
padding-right
padding-bottom
padding-left

npx

Следующий код повторяет предыдущий раздел <div> с отступами, добавленными в теги <div>, <p> и <span>, чтобы создать дополнительное пространство между текстом и окружающими его границами. Можно создавать различные эффекты, определяя различную величину отступов для каждой из четырех сторон.

<style type="text/css">
div#A  {padding:7px;
        border-width:7px; 
        border-color:red; 
        border-top-style:solid; 
        border-right-style:dashed; 
        border-bottom-style:ridge; 
        border-left-style:double}

p#B    {padding:7px; border:dashed 3px blue}

span#C {padding:2px; border:solid 4px green}
</style>

<div id="A">
  <p id="B">This is a <span id="C">text string with borders</span> 
  inside a paragraph with borders inside a division with four different
  borders.</p>
</div>

Рис. 6.8. Отступы, окружающие текстовые элементы

Границы изображений

Можно создавать границы вокруг изображений, задавая стиль границы. Следующий код создает границу ridge, толщиной 7 пикселей, как показано слева на рисунке 6.9.

<img src="Stonehenge.jpg" style="border:ridge 7"/>

Рис. 6.9. Изображения с границами

Невозможно разделить границу и изображение, вводя отступ вокруг самого изображения. Однако, можно поместить изображение внутрь другого контейнера, например, тега <span>, и добавить отступы в этот контейнер. Этот прием закодирован ниже и показан справа на рисунке 6.9.

<span style="border:ridge 7; padding:10px"><img src="Stonehenge.jpg"/></span>

Поля, границы и отступы

Иллюстрация на рисунке 6.10 дает визуальное представление о таких компонентах элементов страницы, как поля ( margin ), границы ( border ) и отступы ( padding ). Для каждой из частей этих компонентов можно задавать одинаковый размер для всех четырех сторон контейнера, или отдельные стороны могут иметь различные значения. Вместе с размером контейнера и стилями размещения, рассматриваемыми далее, можно организовать и оформить контейнер с целью добиться более точного размещения и улучшения удобочитаемости содержимого страницы.

Рис. 6.10. Поля (margin), отступы (padding), и границы (border), окружающие элементы страницы