CSS поле рушится?

Question

Я работаю с Google Chrome на OS X, и у меня, похоже, возникла проблема разрыва полей. У меня есть два элемента div, наложенных друг на друга, оба с полем top 2px и margin-bottom 5px, и оба с границей 1px. Согласно моей арифметике, должно быть 1 + 1 + 2 + 5 = 7px пробела между областями «содержимого» элементов div, поскольку граница предотвращает свертывание полей?

Еще более запутанным является то, что в месте, где у меня есть div с границей 3px и вершиной 0 полей под одним из ранее описанных div, я получаю 9px пространства (как мне очень хочется). Единственная разница между элементами div - это дополнительный класс, который сужает границу и переопределяет поля, поэтому оба элемента имеют одинаковое заполнение (только padding-bottom равно 0). Кто-нибудь может указать, где я ошибся?

Answer 1

Границы занимают часть пространства поля. Соседние поля разрушаются.

Игнорировать границу на мгновение. Скажем, у вас есть два диска. У вершины есть край на 2 пикселя. Нижняя часть имеет верхнюю границу 5 пикселей. Какое пространство между ними? Правильный ответ - 5 пикселей, что является максимумом этих двух значений. Это не добавка.

Теперь добавьте границы в 1 пиксель к каждой, и вы уменьшите это поле до 3 пикселей.

Answer 2

Возможно, родительский класс с большим весом или идентификатором имеет больший приоритет (вы знаете, у идентификатора больше специфичности, или у родителя и т. Д. Эти сложные иерархические отношения (или у вас есть! Важный; где-то ...) )), и у этого есть поле: 0 или отступ: 0, каким-то образом.

Во всяком случае, легче угадать с помощью куска HTML и его CSS ... :) Потому что может быть много вещей.

Answer 3

Маржа интерпретируется как минимальное пространство для следующего элемента.

Таким образом, между элементами должен быть зазор 5 пикселей. Видите, как будто они перекрываются.