Heres the fiddleСтранный вопрос Маржа с дисплеем: встроенный блок ребенок
Когда я установил #two встраивать-блок, он вычитает 16 точек верхнего/нижнего края от <p> и добавляет его в дивы высота коробки содержание так он становится 52px вместо 20px .. почему это так?
То, что вы видите, это один из случаев незнакомца margin collapsing.
Если родители и дети являются блочными элементами и нет ничего (набивки, границы и т.д.), отделяя их вертикальные поля, тогда эти поля рухнут. Свернутые поля - это когда два соседних поля не добавляются (как и следовало ожидать), но вместо этого отображается большее из двух. В случае родительский-ребенок развалившийся край заканчивается вне родителя. Вы можете прочитать более подробную информацию в разделе Родительский и первый/последний ребенок в приведенной выше ссылке.
Установка родительского элемента в inline-block или float:left; Ввод его или ряд других вещей (см. Ссылку для более полного списка) приведет к поломке полей. Это приводит к поведению, к которому мы привыкли: маржа ребенка появится внутри родителя, добавив к его общей высоте, и поле родителя также будет отображаться.
[Он делает!] (Http://jsfiddle.net/URbPD/) Отображаются поля родителя и ребенка, поэтому они не рушились. Имеет ли это смысл? Для сравнения, [здесь показано, как он отображается, когда поля свертываются.] (Http://jsfiddle.net/8sfmE/) – jmeas
У абзацев есть поля, встроенные (в большинстве браузеров).
Попробуйте это:
p
{
margin: 0px;
}
Это уже ответил и принял, я все еще хотел бы отметить, что clearfixing это предотвратило бы запас коллапс, таким образом, нормализуя его поведение
Я хотел бы добавить:
.two:before,
.two:after {
content: " ";
display: table;
}
.two:after {
clear: both;
}
Смотреть это fiddle. Вот Николас Галлахер clearfix Я использовал.
Разработать и расширить существующие ответы ..
Такое поведение известно как collapsing margins.
В CSS, примыкающие края двух или более боксов (которые могут или не могут быть братьями и сестрами) могут объединяться, образуя единый запас. Полагают, что поля, которые объединяют этот способ, сворачиваются, и полученный комбинированный запас называется скомпенсированным запасом.
Чтобы обойти эту проблему, необходимо установить новый контекст форматирования блока:
9.4.1 Block formatting contexts
поплавки, абсолютно позиционируемые элементы, блок-контейнеры (например, встроенные блоки, ячейки таблицы , а также заголовки таблиц), которые не являются блочными блоками, а блок-блоки с «переполнением», кроме «видимых» (кроме случаев, когда это значение было распространено в окне просмотра) устанавливает для своего содержимого контексты форматирования.
В контексте форматирования блоков коробки выкладываются один за другим, вертикально, начиная с верхней части содержащего блока. Вертикальное расстояние между двумя боковыми ячейками определяется свойствами «margin». Вертикальные поля между соседними блочными блоками в контексте форматирования блока сворачиваются.
Поэтому несколько различных способов установить новый блок форматирования будет ..
Изменение overflow свойство родительского элемента в нечто иное, чем значение по умолчанию, visible - (updated example)
Изменение display элемента в inline-block - (updated example)
Float элемент - (updated example)
Это действительно сложный пример. Почему бы вам не удалить 90 процентов кода, который не является частью проблемы? –