CSS свойство margin
margin
Свойство определяет пространство вокруг элементов, т.е. сколько места должно быть оставлено по сторонам.
Он прозрачный и не имеет цвета фона.
Вы можете изменить поля элемента по одному для каждой стороны или можете указать все сразу, используя сокращенное свойство.
CSS Margin Properties
| CSS Margin Properties | Описание |
|---|---|
| margin | Он устанавливает одинаковые поля для каждой стороны элемента. |
| margin-left | Он устанавливает только левое поле элемента. |
| margin-right | Он устанавливает только правое поле элемента. |
| margin-top | Он устанавливает только верхнее поле элемента. |
| margin-bottom | Он устанавливает только нижнее поле элемента. |
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS margin </title>
<meta charset="UTF-8">
<style>
p{
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
border: 1px solid black;
background-color: skyblue;
}
</style>
</head>
<body>
<h2>This paragraph is not displayed with specified margin. </h2>
<p>This paragraph is displayed with specified margin.</p>
</body>
</html>Выход
Этот абзац не отображается с указанным полем.
Этот абзац отображается с указанным полем.
Сокращенное свойство margin
Сокращенное свойство CSS сокращает код, чтобы дать поля. Он определяет все свойства полей сразу для всех сторон, и нет необходимости указывать поля для каждой стороны отдельно.| Если даны четыре значения: | Если даны три значения: |
|---|---|
| margin: 25px 50px 75px 100px; | margin: 25px 50px 75px; |
| верхнее поле - 25 пикселей | верхнее поле - 25 пикселей |
| правое поле - 50 пикселей | левое и правое поля - 50 пикселей |
| нижнее поле - 75 пикселей | нижнее поле - 75 пикселей |
| левое поле - 100 пикселей |
| Если даны два значения: | Если дано только одно значение: |
|---|---|
| margin: 25px 50px; | margin: 25px; |
| верхнее и нижнее поля - 25 пикселей | все четыре поля по 25 пикселей |
| левое и правое поля - 50 пикселей |
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Property </title>
<meta charset="UTF-8">
<style>
.example {
background-color: seagreen;
margin: 50px 100px 150px 200px;
padding:10px;
}
</style>
</head>
<body>
<h3>This paragraph is not displayed with specified margin. </h3>
<p class="example">This paragraph is displayed with specified margin.</p>
</body>
</html>Выход
Этот абзац отображается с указанным полем.
Значения маржи CSS
| Ценить | Описание |
|---|---|
| авто | Это позволяет браузеру вычислять горизонтальные поля. Он равномерно разделяет поля и доступное пространство. |
| длина | В нем указывается поле в pt, px, см и т. Д. |
| % | Он определяет маржу в процентах от ширины содержащего элемента. |
| наследовать | Он наследует маржу от родительского элемента. |
Наследуемая ценность
Этот пример позволяет наследовать левое поле от родительского элемента:
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Inherit </title>
<meta charset="UTF-8">
<style>
#example {
border: 1px solid blue;
margin-left: 50px;
}
#inherit {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container" id="example">
<p id="inherit">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>Выход
Это абзац с унаследованным левым полем (от элемента div).