Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 6:

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

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

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

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

Таблица 6.4. Свойства оформления отступов
Свойство Значения
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.23. Код для отступов и различных стилей границы
Отступы, окружающие текстовые элементы

Рис. 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.24. Код для окружающих изображение отступов

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

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

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

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

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!