HTML-верстка: инструменты и приемы профессиональной front-end разработки

Margin


назад вперед

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


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 — справка 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


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта