Свойство margin задает расстояние (ширину отступов) от границ блока до ближайших элементов или до краев окна браузера для всех или только для указанных сторон.
Это свойство применимо ко всем элементам.
Структура блока
Значение свойства margin
Значение задается в единицах длины, принятых в CSS (подробнее здесь...) или в %,
- auto – автоматически задается браузером,
- inherit - принимает значение свойства родительского элемента.
При задании величины отступов допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:
| Количество значений | Результат |
| 1 | Отступы будут установлены от границ элемента для всех его сторон одновременно. |
| 2 | Первое значение устанавливает величину отступов от верхней и нижней границ, второе – от боковых границ элемента. |
| 3 | Первое значение устанавливает величину отступа от верхней границы, второе – от боковых границ, а третье значение – от нижней границы элемента. |
| 4 | Значения поочередно устанавливают величину отступов от верхней, правой, нижней и левой границ элемента. |
Таким образом свойство margin объединяет в себе свойства margin-top , margin-right , margin-bottom и margin-left , которые устанавливают величину отступов от каждой из границ элемента индивидуально.
У окна браузера по умолчанию также установлены отступы. Чтобы от них избавиться необходимо в теге <body> указать для свойства margin значение 0.
- auto или 0
<html>
<head>
<meta charset="utf-8">
<title> Свойство margin </title>
</head>
<body>
<p style="background-color:#CC6666; border:#CC0000 solid 3px; padding:5px; margin:100px;"> Для этого абзаца установлены отступы 100 пикселей. </p>
<p align=center style="background-color:#0099CC; border:#330066 dashed 2px; padding:5px; margin:50px;"> У этого абзаца величина отступов составляет 50 пикселей, но так как у первого абзаца отступы составляют 100 пикселей, то расстояние между 1-м и 2-м абзацами 100 пикселей. </p>
<p style="background-color:#FFCC33; border:#FF0000 double 4px; padding:5px;"> У этого абзаца отступы отсутствуют. Но у 2-го абзаца отступы составляют 50 пикселей, поэтому до него 50 пикселей. </p>
</body>
</html>
Если для соседних элементов установлены отступы разной ширины, то расстояние между ними будет соответствовать величине большего отступа.
И еще. Так как отступы располагаются за пределами блока, то фон блока или его фоновое изображение на них не распространяются. Отступы всегда прозрачны, сквозь них просвечивается
Для строчных элементовХотелось бы отметить, что свойство margin в основном применяется к блочным элементам и к тегу <img>.
И, как Вы уже, наверное догадались, представленное описание этого свойства относится именно к блочным элементам.
Свойство margin можно применить и к строчным элементам, но оно для них работает только в горизонтальной плоскости. Таким образом свойства margin-top и margin-bottom к строчным элементам не применимы.
<html>
<head>
<meta charset="utf-8">
<title> Свойство margin и строчные элементы </title>
</head>
<body>
<p style="border:#CC0033 solid 2px; margin:10px;"> Абзац - это блочный элемент. </p>
<span style="border:#CC0033 solid 2px; margin:10px;"> Строчный элемент. Отступы - 10 пикселей.</span>
<span style="border:#CC0033 solid 2px; margin:10px;"> Строчный элемент. Отступы - 10 пикселей.</span> <br>
<span style="border:#CC0033 solid 2px; margin:0px;"> Отступы - 0 пикселей. </span>
<strong style="border:#CC0033 solid 2px; margin:50px;"> Строчный элемент. Отступы - 50 пикселей. </strong>
<span style="border:#CC0033 solid 2px;"> Строчный элемент. </span>
<p style="border:#CC0033 solid 2px; margin-top:25px; margin-bottom:20px;"> Абзац. Верхний отступ - 25, нижний - 20 пикселей. </p>
<span style="border:#CC0033 solid 2px; margin-left:30px; margin-right:100px;"> Строчный элемент. Отступ слева - 30, справа - 100 пикселей. </span>
<span style="border:#CC0033 solid 2px;"> Строчный элемент. </span> <br>
<span style="border:#CC0033 solid 2px; margin-top:10px;"> Cтрочный элемент. Отступ сверху отсутствует! </span>
</body>
</html>
Попробуйте самостоятельно поэкспериментировать и почитайте о блочных и строчных элементах (подробнее здесь...)!
