Свойство margin

Свойство margin устанавливает пустое пространство от внешнего края border, padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

margin

Рис. 1. margin

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom.

Пример 1. Расстояние между блоков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .block {
    background: #B08874; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 1rem; /* Поля вокруг содержимого */
    margin-bottom: 1rem; /* Расстояние снизу */
   }
  </style>
 </head>
 <body>
  <div class="block">Первый блок</div>
  <div class="block">Второй блок</div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Расстояние между блоков

Рис. 2. Расстояние между блоков

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

margin: все стороны;
margin: 10px;

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

margin: верх-низ лево-право;
margin: 10px 20px;

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .dialog {
    width: 80%; /* Ширина блока */
    background: #D4E3A5; /* Цвет фона */
    border: 2px solid #7D9B3D; /* Параметры рамки */
    padding: 1rem; /* Поля */
    margin: auto; /* Выравниваем по центру */
   }
  </style>
 </head>
 <body>
  <div class="dialog">
   Полинезийцы называют Млечный путь Манго-Роа-И-Ата, 
   что в переводе с маори означает «Длинная акула на рассвете».
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Выравнивание блока по центру

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

Пример 3. Значение auto

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   .center {
    display: block; /* Блочный элемент */
    margin: auto; /* Выравниваем по центру */
   }
  </style>
 </head>
 <body>
  <img src="image/html-128.png" alt="HTML5" class="center">
 </body>
</html>

Результат данного примера показан на рис. 4.

Выравнивание картинки по центру

Рис. 4. Выравнивание картинки по центру

Проценты

В качестве значения margin можно использовать процентную запись, с которой связаны следующие особенности.

  • По горизонтали проценты считаются от ширины всего блока.
  • По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   p + .stat {
    margin-top: -1rem; /* Поднимаем текст вверх */
   }
   .stat {
    font-size: 3rem; /* Размер текста */
   }
  </style>
 </head>
 <body>
  <p>Продано ёлок</p>
  <p class="stat">64</p>
 </body>
</html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Поднимаем блок вверх через margin-top

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

Для некоторых элементов браузер добавляет margin автоматически. Вот несколько примеров:

  • для <body> по умолчанию margin задан как 8px;
  • для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
  • для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента <body>, после чего элемент <header> плотно прилегает к краям браузера.

Пример 5. Обнуление margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   body {
    margin: 0; /* Обнуляем */
   }
   header {
    background: #D4E3A5; /* Цвет фона */
    padding: 1em; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <header><h1>Кря-кря</h1></header>
 </body>
</html>

Результат данного примера показан на рис. 6.

Обнуление margin у <body>

Рис. 6. Обнуление margin у <body>

Перейти к заданиям

Выравнивание таблицы

Сделайте таблицу, как показано на рис. 1. Ширина таблицы составляет 80% и она выровнена по центру. Обратите внимание, что содержимое третьей колонки выровнено по центру.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   .jewel {
    width: 80%; /* Ширина таблицы */
    margin: auto; /* Выравниваем по центру */
    border-collapse: collapse;
   }
   .jewel td {
    border: 1px solid #000; /* Рамка вокруг ячеек */
   }
   .jewel td:nth-child(3) {
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table class="jewel">
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
    <th>Формула</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Белый</td><td>10</td><td>C</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
    <td>Al<sub>2</sub>O<sub>3</sub></td>
   </tr>
   <tr>
    <td>Аметист</td><td>Голубой</td><td>7</td>
    <td>SiO<sub>2</sub></td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
    <td>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></td>
   </tr>
   <tr>
    <td>Сапфир</td><td>Голубой</td><td>9</td>
    <td>Al<sub>2</sub>O<sub>3</sub></td>
   </tr>
  </table>
 </body>
</html>

Погода

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Погода</title>
  <style>
   section {
    text-align: center; /* Выравниваем по центру */
   }
   .weather {
    background: #2962a9; /* Цвет фона */
    color: #fff; /* Цвет текста */
    display: inline-block; /* Выстраиваем по горизонтали */
    padding: 10px; /* Поля в блоке */
    margin: 0 5px; /* Расстояние между блоков */
    text-align: center; /* Выравниваем по центру */
   }
  </style>
 </head>
 <body>
  <section>
   <div class="weather">
    <p>ВТ</p>
    <p><img src="image/weather-clear.png" alt=""></p>
    <p>Солнечно</p>
   </div>
   <div class="weather">
    <p>СР</p>
    <p><img src="image/weather-overcast.png" alt=""></p>
    <p>Облачно</p>
   </div>
   <div class="weather">
    <p>ЧТ</p>
    <p><img src="image/weather-showers.png" alt=""></p>
    <p>Дождливо</p>
   </div>
  </section>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 07.01.2019
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid