Margin (внешний отступ) в CSS // Вебшкола онлайн

 back-1028825 next-9227989

Свойство margin задает расстояние от элемента до соседних элементов.

Margin «очищает» территорию вокруг элемента (за пределами рамки (border)). Margin (внешний отступ) не имеет фонового цвета (точнее фон прозрачный).

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

Возможные значения

Значение Описание
auto Внешний отступ определяется браузером.
Размер Фиксированный внешний отступ (пиксели, пункты, сантиметры и т.п.)
% Внешний отступ в % от родительского элемента

Заметка: вы можете использовать отрицательные значения внешнего отступа, для перекрывания элементов.

Внешние отступы — разные значения для разных сторон

В CSS вы можете назначить разные значения внешних отступов для различных сторон элемента:

margin-top:100px; margin-bottom:100px; margin-right:50px;

margin-left:50px;

Посмотреть

Margin — краткая запись

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

Краткой записью свойств внешних отступов является свойство «margin»:

margin:100px 50px;

Посмотреть

Свойство margin может иметь от одного до четырех значений.

  • margin:25px 50px 75px 100px;
    • верхний отступ равен 25px
    • правый отступ равен 50px
    • нижний отступ равен 75px
    • левый отступ равен 100px

  • margin:25px 50px 75px;
    • верхний отступ равен 25px
    • правый и левый отступы равны 50px
    • нижний отступ равен 75px

  • margin:25px 50px;
    • верхний и нижний отступы равны 25px
    • правый и левый отступы равны 50px

  • margin:25px;

Все свойства margin — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
margin Краткая запись всех внешних отступов margin-top margin-right margin-bottom

margin-left

1
margin-bottom Нижний внешний отступ auto
размер-отступа
%
1
margin-left Левый внешний отступ auto
размер-отступа
%
1
margin-right Правый внешний отступ auto
размер-отступа
%
1
margin-top Верхний внешний отступ auto
размер-отступа
%
1

 back-1028825 next-9227989