Отступы margin в CSS
Свойства CSS margin создают пространство вокруг элемента, за пределами его рамки.
Отступы margin задают расстояние между рамкой элемента и окружающими его элементами.
CSS позволяет задавать margin для каждой стороны элемента (сверху, справа, снизу, слева), а также есть сокращённое свойство для задания всех сразу.
Пример
У этого элемента отступ margin 70px со всех сторон.
<style> задайте <div> margin 70px и видимую рамку и фон, чтобы пространство вокруг него было заметно. Поместите внутрь div немного текста.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a margin of 70px.</div>
</body>
</html>
Margin — отдельные стороны
В CSS есть отдельное свойство для каждой стороны: margin-top, margin-right, margin-bottom и margin-left.
Все свойства margin могут принимать такие значения:
auto— браузер сам вычисляет отступ.- длина — отступ в
px,pt,cmи так далее. - процент — отступ как процент от ширины содержащего элемента.
inherit— отступ берётся от родительского элемента.
Совет: Отрицательные значения допускаются.
Пример
Каждая сторона абзаца получает свой отступ margin.
<style> задайте <p> margin-top 100px, margin-bottom 100px, margin-right 150px и margin-left 80px. Добавьте рамку, чтобы отступы были видны. Добавьте абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>This paragraph has different margins on all four sides.</p>
</body>
</html>
Margin — сокращённое свойство
Чтобы сократить код, можно задать все отступы margin одним свойством margin, которое заменяет margin-top, margin-right, margin-bottom и margin-left.
Количество значений меняет, к каким сторонам они применяются:
- Четыре значения (
25px 50px 75px 100px): сверху, справа, снизу, слева. - Три значения (
25px 50px 75px): сверху, затем справа и слева, затем снизу. - Два значения (
25px 50px): сверху и снизу, затем справа и слева. - Одно значение (
25px): все четыре стороны.
Четыре значения
Задаёт отступы сверху, справа, снизу и слева по порядку.
<style> задайте <p> margin: 25px 50px 75px 100px (сверху, справа, снизу, слева) и рамку, чтобы отступы были видны. Добавьте абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Four values: 25px top, 50px right, 75px bottom, 100px left.</p>
</body>
</html>
Три значения
Задаёт сверху, затем справа и слева, затем снизу.
<style> задайте <p> margin: 25px 50px 75px (сверху, справа и слева, снизу) и рамку, чтобы отступы были видны. Добавьте абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Three values: 25px top, 50px right and left, 75px bottom.</p>
</body>
</html>
Два значения
Задаёт сверху и снизу, затем справа и слева.
<style> задайте <p> margin: 25px 50px (сверху и снизу, затем справа и слева) и рамку, чтобы отступы были видны. Добавьте абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Two values: 25px top and bottom, 50px right and left.</p>
</body>
</html>
Одно значение
Задаёт одинаковый отступ со всех четырёх сторон.
<style> задайте <p> margin: 25px (все четыре стороны) и рамку, чтобы отступы были видны. Добавьте абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>One value: 25px on all four sides.</p>
</body>
</html>
Значение auto
Задайте margin равным auto, чтобы центрировать элемент по горизонтали в его контейнере. Элемент сохраняет заданную ширину, а оставшееся пространство равномерно делится между левым и правым отступами.
Пример
Div шириной 300px центрирован с помощью margin: auto.
<style> задайте <div> ширину 300px, margin: auto и рамку 1px solid красного цвета. Div должен располагаться по центру своего контейнера. Поместите внутрь немного текста.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div>This div is centered with margin: auto.</div>
</body>
</html>
Значение inherit
Задайте margin равным inherit, чтобы взять отступ от родительского элемента.
Пример
Левый отступ абзаца унаследован от его родительского div.
<style> задайте <div> рамку 1px solid красного цвета и margin-left 100px. Задайте абзацу с классом "ex1" margin-left: inherit, чтобы он копировал левый margin родительского div. Поместите абзац внутрь div.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<div>
<p class="ex1">This paragraph inherits its left margin from the parent div.</p>
</div>
</body>
</html>
Все свойства CSS margin
Сводка свойств margin:
margin— задаёт все отступы margin в одном объявлении.margin-bottom— задаёт нижний отступ.margin-left— задаёт левый отступ.margin-right— задаёт правый отступ.margin-top— задаёт верхний отступ.