От автора: элементы являются строительными блоками веб-страниц — при создании веб-сайтов вы фактически «складываете кирпичи» из элементов. Когда эти элементы уложены, вы используете CSS, чтобы настроить их внешний вид и расположение.
Чтобы правильно разместить элемент на веб-странице относительно других элементов, мы используем такие вещи, как отступы и поля. Это:
padding: пространство между границей элемента и областью содержимого.
margin: пространство между границей элемента и границей соседних элементов.
Вот как визуализируются отступы и поля элемента с помощью веб-инспектора Google Chrome:
Это должно быть достаточно ясно, но существуют ситуации, когда поля одного элемента и его соседа будут сливаться (или сворачиваться) в единое пространство; таким образом, что нет возможности сказать, чье это поле:
Это могло произойти в вашем коде, если вы некоторое время писали HTML и CSS. И это может быть занозой, если вы не знаете, что происходит под капотом! Чтобы правильно понять это, нам нужно начать с того, что означает сворачивание полей.
Что такое сворачивание полей?
Хороший вопрос, рад, что вы спросили. Согласно W3C: «В CSS смежные поля двух или более блоков (которые могут быть или не быть смежными) могут объединяться в одно поле. Говорят, что поле, которое объединяется таким образом, сворачивается, а итоговое комбинированное поле называется свернутым полем». — W3C
Давайте разберем это подробно. Таким образом, «смежные поля» — это поля, расположенные рядом друг с другом, и они могут объединяться в единое поле. Но значит ли это, что все смежные поля являются сворачиваемыми? Ответ — нет!
В CSS смежные поля — это вертикальные поля, которые соответствуют некоторым правилам. Да, вы прочитали правильно! Это означает, что горизонтальные поля (margin-left и margin-right) не считаются смежными. Кроме того, в некоторых ситуациях вертикальные поля также не считаются смежными.
Давайте начнем с определенных сценариев, в которых сворачивание полей происходит.
1. Родительский элемент и первый потомок
В приведенном ниже примере кода:
<div>Outside the parent</div> <div class="parent"> <p class="child"> Here is a paragraph housed in the parent element </p> </div>
Второй div — это родитель, и он содержит потомка p. Если мы применяем к родителю и первому ребенку свойство margin-top, в результате оба поля будут соприкасаться, поля будут свернуты.
div { background: #3d8bb1 /* blue */;
}
.parent { margin-top: 30px; background: #49b293 /* green */; height: 150px;
}
.child { margin-top: 10px; background: #b03532 /* red */;
}
Вы можете ожидать, что поле будет отображаться прямо над красным элементом p, давая нам кусочек зеленого цвета над ним.
Однако родитель и его дочерний элемент выровнены по верхнему краю, в этом случае для отображения выбирается поле с большим значением (30px), а меньшее сворачивается в 0. Если бы потомок имел большее поле (скажем, 50px), тогда было бы выбрано оно.
Если вы измерите, вы увидите, что пространство между границей потомка и внешней стороной div составляет 30px.
Отрицательные значения полей
Если бы оба поля имели отрицательные значения, например:
.parent { margin-top: -30px; background: #49b293 /* green */; height: 150px;
}
.child { margin-top: -10px; background: #b03532 /* red */;
}
Выбирается снова самое большое поле, в данном случае это -10px.
Однако, если одно поле является отрицательным значением, а другое положительным, мы объединяем оба значения:
.parent { margin-top: 10px; background: #49b293 /* green */; height: 150px;
}
.child { margin-top: -30px; background: #b03532 /* red */;
}
В этом случае поля слагаются, что даст нам результат -20px.
Важно: значения определяются точно таким же образом во всех сценариях сворачивания полей.
2. Родительский элемент и последний потомок
Как вы можете себе представить, поля также могут сворачиваться между margin-bottom родительского элемента и margin-bottom дочернего. Предположим, у нас есть HTML, который выглядит так:
<div class="parent"> <p class="child"> Here is a paragraph housed in the parent element </p> </div> <div>Outside the parent</div>
И стили, которые выглядят так:
.parent { margin-bottom: 30px; background: #49b293 /* green */; height: auto;
}
.child { margin-bottom: 10px; background: #b03532 /* red */; height: 100px;
}
Будет использовано большее значение margin-bottom, а другое будет свернуто в 0. Разница здесь в том, что высота родителя должна быть установлена на auto.
3. Смежные элементы
Внутри родительского элемента поля будут сворачиваться, когда первому дочернему элементу применено margin-bottom, а к следующему — margin-top:
<div class="parent"> <p class="first-child"> Here is a paragraph housed in the parent element </p> <p class="second-child"> This is the second child </p> </div>
Если мы применяем margin-top и margin-bottom так:
.first-child { margin-bottom: 30px; background: #b03532 /* red */; height: 150px;
}
.second-child { margin-top: 20px; background: #da6f2b /* orange */; height: 100px;
}
Таким же образом, как мы рассчитывали ранее, мы получим пространство между границами дочерних элементов в 30px, а не 20px.
3 случая, которые нужно помнить о сворачивании полей
Это подводит нас к концу данной темы! В дополнение к тому, что мы рассмотрели выше, я должен повторить несколько важных моментов, касающихся сворачивания полей.
1. Элементы уровня блока
Сворачивание полей возможны только при использовании элементов уровня блока.
2. Поля сворачиваются только по вертикали
Только вертикально прилегающие поля будут сворачиваться, и то не всегда.
3. Отступы, границы и зазор
Если мы добавили отступ, границу или зазор к элементам в приведенных выше примерах, сворачивание применено не будет. Другими словами, один из способов избавиться от поведения сворачиваемых полей — это добавить какое-то разделение (границы, отступы или зазоры) между полями.
Заключение
Хотя сворачивание полей иногда может быть болезненным, понимание того, как и где это работает, очень полезно, особенно если вы столкнулись с ними случайно!
Автор: Kingsley Silas Chijioke
Источник: https://webdesign.tutsplus.com
Редакция: Команда webformyself.
