CSS :: Свойство margin
Сокращенное css-свойство margin (от англ. margin – поле страницы) используется для установки внешних отступов (полей) элемента в одном объявлении, позволяя задавать поля как для отдельных, так и сразу для всех сторон элемента.
Под внешним отступом элемента подразумевается расстояние от границы (стороны) текущего элемента до соответствующей границы (стороны) родительского элемента либо до соответствующей границы (стороны) соседнего элемента (см. рисунок №1).
Рис №1. Общая схема элемента
Следует отметить, что соответствующие внешние горизонтальные отступы между соседними вертикальными сторонами непозиционированных как строчных, так и блочных элементов, суммируются. В тоже время соответствующие внешние вертикальные отступы между соседними горизонтальными сторонами расположенных друг под другом непозиционированных блочных элементов подчиняются эффекту схлопывания, в результате которого, между элементами будет установлен наибольший из них.
Также следует отметить, что вертикальные отступы не срабатывают в отношении строчных элементов, хотя горизонтальные работают правильно.
Большинство браузеров по умолчанию устанавливает для элемента «body» внешние отступы отличные от нуля (обычно это 8px), которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.
Характеристики
- Значение по умолчанию: 0.
- Применяется: ко всем элементам, кроме элементов, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.margin="value".
Синтаксис
margin: [<размер> | <проценты> | auto] {1,4}
Значения
- размер – принимаются любые единицы измерения (смотреть), используемые в CSS. Разрешаются как положительные, так и отрицательные значения.
- проценты – величина внешнего отступа в процентах, которые рассчитываются относительно ширины области содержимого родительского элемента. Разрешаются как положительные, так и отрицательные значения.
- auto – внешние отступы устанавливаются браузером автоматически.
При этом разрешается указывать через пробел одно, два, три или четыре значения:
- одно значение – внешние отступы задаются для всех четырех сторон элемента;
- два значения – первое значение задает внешние отступы для верхней и нижней сторон элемента, второе – правой и левой;
- три значения – первое значение задает внешние отступы для верхней стороны элемента, второе – для правой и левой, третье – для нижней стороны элемента;
- четыре значения – внешние отступы устанавливается по часовой стрелке: для верхней стороны, затем правой, нижней и левой.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-box-3/#margin
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/margin
Примеры
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №1</title>
<style>
/* Прием предварительного обнуления */
/* всех отступов у всех элементов */
*{
margin: 0;
padding: 0;
outline: 0;
}
p{
width: 500px;
border: solid 2px green;
}
/* Внешние и внутренние отступы в одном объявлении */
.all_in_one{
margin: 50px 0px 50px 100px;
padding: 20px 10px 20px 10px;
}
/* Внешние и внутренние отступы по отдельности */
.separate{
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
margin-left: 100px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
</style>
</head>
<body>
<p class="all_in_one">
Внешние и внутренние отступы в одном объявлении<br>
margin: 50px 0px 50px 100px;<br>
padding: 20px 10px 20px 10px;
</p>
<p class="separate">
Тоже самое, но по отдельности<br>
margin-top: 50px;<br>
margin-right: 0px;<br>
margin-bottom: 50px;<br>
margin-left: 100px;<br><br>
padding-top: 20px;<br>
padding-right: 10px;<br>
padding-bottom: 20px;<br>
padding-left: 10px;
</p>
</body>
</html>
Пример №1
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №2</title>
<style>
p{
width: 500px;
border: solid 2px green;
}
/* Отступы в процентах в одном объявлении */
.all_in_one{
margin: 10%;
padding: 5%;
}
/* Отступы в процентах по отдельности */
.separate{
margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;
padding-top: 5%;
padding-right: 5%;
padding-bottom: 5%;
padding-left: 5%;
}
</style>
</head>
<body>
<p class="all_in_one">
Отступы в процентах в одном объявлении<br>
margin: 10%;<br>
padding: 5%;
</p>
<p class="separate">
Тоже самое, но по отдельности<br>
margin-top: 10%;<br>
margin-right: 10%;<br>
margin-bottom: 10%;<br>
margin-left: 10%;<br><br>
padding-top: 5%;<br>
padding-right: 5%;<br>
padding-bottom: 5%;<br>
padding-left: 5%;
</p>
</body>
</html>
Пример №2
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №3</title>
<style>
div{
width: 500px;
height: 300px;
margin-top: 7em;
border: solid 3px blue;
background-color: yellow;
}
p{
width: 300px;
padding: 10%;
border: solid 2px green;
background-color: violet;
}
/* Отрицательные отступы в одном объявлении */
.all_in_one{
margin: -30px 30px 30px -30px;
}
/* Отрицательные отступы по отдельности */
.separate{
margin-top: -30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: -30px;
}
</style>
</head>
<body>
<div>
<p class="all_in_one">
Отрицательные отступы в одном объявлении<br>
margin: -30px 30px 30px -30px;
</p>
</div>
<div>
<p class="separate">
Тоже самое, но по отдельности<br>
margin-top: -30px;<br>
margin-right: 30px;<br>
margin-bottom: 30px;<br>
margin-left: -30px;
</p>
</div>
</body>
</html>
Пример №3
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №4</title>
<style>
/* Прием предварительного обнуления */
/* всех отступов у всех элементов */
*{
margin: 0;
padding: 0;
outline: 0;
}
p{
width: 300px;
height: 50px;
margin: 1em;
border: solid 2px green;
}
/* Переопределяем вертикальные отступы */
.p_1{
margin-top: 5em;
margin-bottom: 10em;
}
.p_2{
margin-top: 5em;
}
span{
width: 50px;
border: solid 2px violet;
}
/* Внешние и внутренние отступы в одном объявлении */
span.all_in_one{
margin: 20px 20px 20px 20px;
}
/* Внешние отступы по отдельности */
span.separate{
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<p class="p_1">
<!-- У строчных элементов вертикальные -->
<!-- внешние отступы не работают, а -->
<!-- горизонтальные суммируются -->
<span class="all_in_one">11111</span>
<span class="all_in_one">22222</span>
<span class="all_in_one">33333</span>
</p>
<!-- У блочных элементов вертикальные -->
<!-- внешние отступы схлопываются до -->
<!-- размера большего из них -->
<p class="p_2">
<span class="separate">11111</span>
<span class="separate">22222</span>
<span class="separate">33333</span>
</p>
</body>
</html>
Пример №4