Всегда показывать большой запас

Question

Я дал одному блоку нижний край 25px и верхний край 10px. Общая маржа должна составлять 35 пикселей, но она показывает 25 пикселей. Если я даю 35px margin, тогда он показывает общее число 35px. Почему он всегда показывает больший запас?

Вот строки кода:

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

Answer 1

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

Для получения более подробной информации, посмотрите на эту часть CSS Standart: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

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

Возможные решения: Вы можете просто поместить край нижней части верхнего элемента на 35 пикселей, как описано выше.

Другой способ это сделать один из элементов, чтобы быть поплавок:

<p style="margin-bottom:25px; outline:1px dashed #000000;clear:both;">aaaaaaaaaaaa</P> 
<p style="margin-top:10px; outline:1px dashed #000000;clear:both;float:left;width:100%">bbbbbbbbbbbbbbbb</p> 

Demo

Над раствором на основе следующего исключения вы можете найти на странице связаны выше:

Краях между плавающий ящик и любая другая коробка не сворачиваются (не даже между поплавком и его дочерними потоками).

Answer 2

Это называется «коллапсирующие поля». Это нормально и соответствует стандартам W3. Он говорит:

• Края коробки корневого элемента не разрушаются.
• Если верхние и нижние края элемента с зазором являются примыкающими, его краями свернуть с примыкающими полями следующих братий, но, что в результате рентабельность не разрушается с нижним краем родительского блока.

Подробнее:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Поэтому ваши два <p> теги:

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</p> 
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p> 

затем разрушаться.

В спецификациях также указаны случаи, когда поля не сбрасываются.Например, плавал элементы имеют не-свернутые поля:

поле между перемещаемой коробкой и любой другой коробкой не сжимаются

И скрипка демонстрирующие разрушился и не-свернуты поля:

Fiddle:
http://jsfiddle.net/k8tFy/3/
(Примечание: вы можете даже увидеть плавали <p> тег даже взаимодействуя с margin-bottom тега <h2>)