CSS свойство margin - httpdoc.ru

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>

Выход

CSS margin

Этот абзац не отображается с указанным полем.

Этот абзац отображается с указанным полем.


Сокращенное свойство 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 Margin Property

Этот абзац отображается с указанным полем.


Значения маржи 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>

Выход

CSS Margin Inherit

Это абзац с унаследованным левым полем (от элемента div).