Почему 10px + 10px = 10px?

Question

У меня есть следующий скрипт, где поля для. Класс портлета ведет себя странно:

http://jsfiddle.net/mYx5y/19/

это должно быть добавление 10px вокруг каждого портлета, что должно означать зазор 20px между портлетами. По какой-то причине я получаю только 20px, если портлет имеет виджет справа или слева от себя, но только 10px, если у портлета есть другой портлет выше или ниже его.

Почему я получаю 10px по вертикали?

Answer 1

Поскольку поля не складываются, они разрушаются.Если у вас есть два элемента A и B, маржа A = 10px и маржа B = 15px, расстояние между A и B будет 15px.

Два решения:

1. Использовать margin-нижняя часть: 20px, margin-top: 0px
2. Оберните их в контейнер и примените отступы: 10px 0;

Answer 2

Поскольку поля сжимаются, они не добавляются, просто max() (будет использоваться наибольшее значение поля соседних объектов).Используйте отступы, если пробел является частью вашего элемента.

Answer 3

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

Два или более смежных вертикальных поля блоков уровня блока в нормальном потоке рушатся.Результирующая ширина поля - это максимальная ширина смежных полей.В случае отрицательных полей максимум абсолютных значений отрицательных соседних полей вычитается из максимума положительных соседних полей.Если нет положительных полей, абсолютный максимум отрицательных соседних полей вычитается из нуля.Заметка.Смежные блоки могут быть созданы элементами, которые не связаны как братья и сестры или предки.

См. Также: Сжимающиеся поля