Как работает марка CSS?

В следующем коде не должно быть поля между .box1 и .box2 20px, так как .box1 имеет нижнее поле 10px и .box2 имеет верхнее поле 10px.

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

http://jsfiddle.net/3C7bW/

Ответы

Ответ 1

Нет, маржа будет всего 10 пикселей между двумя полями.

Вы говорите то же самое дважды ", что должен быть запас 10px ниже коробки 1" и "что должен быть край 10px над box2"

Подумайте об этом так:

Есть два человека, Гарри и Салли. Гарри стоит в 10 футах от Салли. Как далеко Салли от Гарри? Да, у тебя это, 10 футов!

Ответ 2

Нижний край первого окна и верхний край второго ящика считаются примыкающими; поэтому они сворачивают в один.

Обратите внимание, что это относится только к вертикальным полям; горизонтальные поля никогда не разрушаются независимо от обстоятельств. Если вы сделали два поля плавать так, чтобы они выстроились горизонтально и дали .box1 правое поле и .box2 левое поле, общее пространство между ними действительно будет 20px.

На самом деле, даже если вы не выровняли их по горизонтали, а плавали и давали им разрешение, чтобы .box2 очистил .box1, нижнее и верхнее поля больше не будут разрушаться. Оба этих случая упоминаются также в спецификации.

Ответ 3

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

enter image description here

enter image description here

Ответ 4

Поля находятся за пределами вашего элемента DOM и для других полей, таких как прозрачные, чтобы они перекрывали друг друга.

Если вы сделаете это с заполнением, это будет хорошо, потому что заполнение находится внутри div.

Здесь довольно простое объяснение того, как работают поля и прокладки.