Свойство CSS margin
Свойство CSS margin используется для создания пространства вокруг элемента.
Свойство margin является сокращением для следующих свойств:
Мы можем использовать свойство margin для всех сторон (верх, низ, лево, право) сразу. Для верхней стороны мы используем margin-top, для нижней — margin-bottom, для левой — margin-left, а для правой — margin-right.
Свойство margin может быть задано одним, двумя, тремя или четырьмя значениями:
- margin : 25px 10px 15px 20px. Этот код означает, что отступ сверху должен быть 25px, справа — 10px, снизу — 15px, а слева — 20px.
- margin: 15px 10px 20px. Это означает, что отступ сверху должен быть 15px, справа и слева — 10px, а снизу — 20px.
- margin: 15px 10px. Этот код означает, что верхний и нижний отступы равны 15px, а правый и левый — 10px.
- Если margin имеет только одно значение, оно применяется ко всем четырём сторонам.
INFO
Отрицательные значения допустимы.
| Initial Value | 0 |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. Outline is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = "20px 10px"; |
Синтаксис
Синтаксис свойства CSS margin
margin: length | auto | initial | inherit;Пример свойства margin:
Пример свойства CSS margin с четырьмя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Результат
Пример свойства margin, где отступ элемента задан как 10% для всех сторон:
Пример свойства CSS margin со значением % (процент)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 10%;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Пример свойства margin, заданного как "em":
Пример свойства CSS margin со значением em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 4em;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Давайте рассмотрим следующий пример, который показывает разницу между свойствами margin, padding и border:
Пример свойства margin вместе со свойствами padding и border:
Пример свойства CSS margin с одним значением (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #eee;
width: 200px;
border: 20px solid #8ebf42;
padding: 30px;
margin: 55px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Значения
| Value | Description | Play it |
|---|---|---|
| auto | Устанавливает отступ. Это значение свойства по умолчанию. | Play it » |
| length | Определяет отступ в px, pt, cm и т. д. Значение по умолчанию — 0. | Play it » |
| % | Устанавливает отступ в % от содержащего элемента. | Play it » |
| initial | Делает так, чтобы свойство использовало значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Which of the following statements are true about CSS Margins?