Свойство - margin может задать отступы одного элемента Web – страницы от другого , свойством может может быть задано абсолютное или относительное значения.
Свойство margin - это сокращенное свойство для установки значений : margin-top , margin-right , margin-bottom и margin-left в одном объявлении.
Если есть только одно значение компонента, оно применяется ко всем сторонам.
Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое поля устанавливаются на второе.
Если есть три значения, верхнее значение устанавливается на первое значение, левое и правое - на второе, а нижнее - на третье.
Если есть четыре значения, они применяются к верхнему, правому, нижнему и левому соответственно.
Следующий код демонстрирует некоторые возможные объявления margin.
body { margin: 2em } /* все поля установлены на 2em */
body { margin: 1em 2em } /* сверху и снизу = 1em, справа и слева = 2em */
body { margin: 1em 2em 3em } /* вверху = 1em, right = 2em, внизу = 3em, left = 2em */Последнее правило приведенного выше примера эквивалентно приведенному ниже примеру:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* скопировано с противоположной стороны (справа) */
}margin-left – Свойство задает отступ слева.
body {margin-left: 0 } /* отступ слеваmargin-right – Свойство задает отступ справа.
body {margin-right: 5% } /* отступ справа */margin-top – Свойство задает отступ сверху.
body {margin-top: 15mm } /* отступ сверху */margin-bottom – Свойство задает отступ снизу.
body {margin-bottom: 20px } /* отступ снизу. */Убрать все внешние отступы можно с помощью этой строки кода.
body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 }Для свойства margin можно можно внешние отступы за один раз.
body {margin: 15mm 5% 20px 0 }Для совпадающих значений допускается более короткая запись.
body { margin: 0 }Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Внешние отступы: Свойство margin</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
h3 {
color: green;
}
div {
border: 1px solid blue;
width: 270px;}
.left {margin-left: 5px; }
.right {margin-right: 25%; }
.top {margin-top: 15mm; }
.bottom {margin-bottom: 50px; }
p {font-size: 14pt;}
</style>
</head>
<body>
<h1>Внешние отступы: Свойство margin</h1>
<h3>margin-left</h3>
<div>
<p class="left">margin-left:Свойство задает отступ слева.</p>
</div>
<h3>margin-right</h3>
<div>
<p class="left">margin-left:Свойство задает отступ слева.</p>
</div>
<h3>margin-top</h3>
<div>
<p class="left">margin-left:Свойство задает отступ слева.</p>
</div>
<h3>margin-bottom</h3>
<div>
<p class="left">margin-left:Свойство задает отступ слева.</p>
</div>
</body>
</html>Внешние отступы: Свойство margin
