margin в CSS

Если padding (поле) добавляет пространство внутри элемента (между его границей и содержимым), то margin (отступ) добавляет пространство снаружи, между элементом и другими элементами.

<p>Связка ломов, как правило, тонет.</p>
<p>Но в ртути прекрасно плавает.</p>
<p>Но если ломы урановые, то и во ртути тонут.</p>
<p>Сам топи урановые ломы в ртути.</p>

p { margin: 40px; }

Объединение вертикальных margin

Давайте добавим заголовок и подзаголовок.

CSS

.title { margin-bottom: 30px; }
.subtitle { margin-top: 15px; }

HTML

<h1 class="title">MarkSheet</h1>
<h2 class="subtitle">Простое руководство по HTML и CSS</h2>

Как видно из заголовка этого раздела, который намекает на ответ, margin между этими двумя элементами будет 30px, а не 45px. Это происходит потому, что отступы, которые «прикасаются» друг к другу объединятся друг с другом.

Это странно!

Вы можете рассматривать отступы элемента в качестве минимального расстояния, на котором он находится от других элементов.

Это как если бы элемент сказал: «Хорошо, хочу, чтобы следующий элемент был, по крайней мере, в 30px от меня. Если больше, почему бы и нет. Но по меньшей мере 30px, пожалуйста!».

Выбор между margin и padding

Каверзный вопрос. Этот вопрос возникает, когда не применяются ни границы, ни фон. В самом деле: если граница или фон заданы для любого элемента, визуальное отображение будет отличаться. Но если нет, и учитывая что поля и отступы прозрачные, то результат будет выглядеть одинаково.

Спросите себя, зачем нам это пространство. Оно позволяет внутреннему содержимому дышать больше? Или позволяет дышать больше всему элементу целиком? Это padding в первом случае и margin во втором.

Кроме того, учитывайте, что margin могут объединяться.

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