Контурная модель: Отступы CSS

Пустая область вокруг границ элемента — это отступы. Установка отступов создает дополнительное «пространство» вне элемента.

Самый простой способ установить отступы — это использовать атрибут margin, который принимает любую единицу измерения, проценты и даже отрицательные значения.

Атрибут margin CSS

Самый простой способ установить отступы — это использовать Атрибут margin.

Атрибут margin принимает любую единицу измерения, это могут быть пиксели, дюймы, миллиметры или em.

margin можно установить в auto. Чаще всего используется установка значения длины для отступов. Ниже приведено заявление, устанавливающее 1/4 дюйма отступа на всех сторонах элемента h1:

h1 {margin : 0.25in;}

Ниже приведен пример, где для four sides элемента h1 определены различные отступы, используемые единицы измерения — пиксели (px):

h1 {margin : 10px 0px 15px 5px;}

Как и в случае с внутренним полем, порядок значений начинается с верхнего внешнего поля (top) и вращается вокруг элемента по часовой стрелке:

отступ: top right bottom left

Кроме того, можно установить процентное значение для отступа:

p {отступ : 10%;}

Процентное значение рассчитывается относительно ширины родительского элемента. В этом примере отступ для элемента p составляет 10% от ширины родительского элемента.

По умолчанию значение margin равно 0, поэтому если не указать значение для margin, внешнее поле не появится. Однако, на практике, браузеры уже предоставляют预定ные стили для многих элементов, и внешнее поле не исключение. Например, в браузерах, поддерживающих CSS, внешнее поле создает "пустые строки" над и под каждым элементом абзаца. Поэтому, если не указать отступ для элемента p, браузер может сам применить отступ.もちろん， если вы сделали особое заявление, это изменит(default) стиль.

Копирование значений

Помните? Мы упоминали о копировании значений в первых двух разделах. Теперь мы расскажем, как использовать копирование значений.

Иногда, мы вводим некоторые повторяющиеся значения:

p {отступ: 0.5em 1em 0.5em 1em;}

Через копирование значений, вам не нужно повторно вводить эти числа. Предыдущие правила эквивалентны следующим правилам:

p {отступ: 0.5em 1em;}

Эти два значения могут заменить предыдущие 4 значения. Как это делается? CSS определяет некоторые правила, позволяющие указывать внешнее поле с меньшим количеством значений. Правила такие:

  • Если значение левого внешнего поля отсутствует, то используется значение правого внешнего поля.
  • Если значение нижнего внешнего поля отсутствует, то используется значение верхнего внешнего поля.
  • Если значение правого внешнего поля отсутствует, то используется значение верхнего внешнего поля.

Ниже приведена более наглядная иллюстрация этого:

Копирование значений CSS

Иными словами, если для внешнего поля указаны 3 значения, то четвертое значение (то есть левое внешнее поле) будет скопировано из второго значения (правое внешнее поле). Если указаны два значения, четвертое значение будет скопировано из второго значения, третье значение (нижнее внешнее поле) будет скопировано из первого значения (верхнее внешнее поле). В последнем случае, если указано только одно значение, то другие три внешних поля будут скопированы из этого значения (верхнее внешнее поле).

Используя эту простую схему, вам нужно указать только необходимые значения, а не все 4 значения, например:

h1 {отступ: 0.25em 1em 0.5em;}	/* эквивалентно 0.25em 1em 0.5em 1em */
h2 {отступ: 0.5em 1em;}		/* эквивалентно 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* эквивалентно 1px 1px 1px 1px */

Этот метод имеет один маленький недостаток, с которым вы обязательно встретитесь. Предположим, что вы хотите установить верхний и левый отступ элемента p в 20 пикселей, нижний и правый отступы в 30 пикселей. В этом случае, необходимо написать:

p {margin: 20px 30px 30px 20px;}

Только这样才能 получить желаемый результат. К сожалению, в этом случае количество необходимых значений не может быть уменьшено.

Посмотрим на другой пример. Если вы хотите, чтобы все отступы, кроме левого, были auto (левый отступ 20px):

p {margin: auto auto auto 20px;}

Точно так же, только这样才能 получить желаемый результат. Проблема в том, что вводить эти auto несколько неудобно. Если вы просто хотите контролировать отступы одной стороны элемента, используйте атрибуты одностороннего отступа.

Атрибуты одностороннего отступа

Вы можете использовать односторонние атрибуты отступа для установки значений отступа для одной стороны элемента. Предположим, что вы хотите установить левый отступ элемента p в 20px. Не нужно использовать margin (нужно вводить много auto), а можно использовать следующий метод:

p {margin-left: 20px;}

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

В одном правиле можно использовать несколько таких односторонних атрибутов, например:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Конечно, в этом случае, использование margin может быть проще:

p {margin: 20px 30px 30px 20px;}

Независимо от того, используете ли вы односторонний атрибут или margin, результат будет одинаковым. В общем, если вы хотите установить отступ для нескольких сторон, использование margin будет проще. Однако, с точки зрения отображения документа, на самом деле не имеет значения,哪种 метод используется, поэтому выберите тот, который вам удобнее.

Советы и комментарии

Совет:Netscape и IE определяют значение по умолчанию для отступа (margin) тега body 8px. В то время как Opera делает это по-другому. Напротив, Opera определяет значение по умолчанию для внутреннего заполнения (padding) 8px, поэтому, если вы хотите настроить все края веб-сайта и правильно отобразить их в Opera, вам нужно настроить padding для body вручную.

Пример внешнего отступа CSS:

Установить левый внешний отступ текста
Этот пример демонстрирует, как можно установить левый отступ текста.
Установить правый отступ текста
Этот пример демонстрирует, как можно установить правый отступ текста.
Установить верхний отступ текста
Этот пример демонстрирует, как можно установить верхний отступ текста.
Установить нижний отступ текста
Этот пример демонстрирует, как можно установить нижний отступ текста.
Все свойства внешних отступов в одном заявлении.
Этот пример демонстрирует, как можно установить все свойства внешних отступов в одном заявлении.

Атрибут внешних отступов CSS

Атрибут Описание
margin Краткий атрибут. Установить все свойства внешних отступов в одном заявлении.
margin-bottom Установить нижний внешние отступ элемента.
margin-left Установить левый внешние отступ элемента.
margin-right Установить правый внешние отступ элемента.
margin-top Установить верхний внешние отступ элемента.