обивка на родительском оборота края ребенка в высоту expandation

Question

Существует блок-:

<div class="block"> 
    <p>this is a paragraph this is a paragraph</p> 
</div> 

И его стиль:

.block{background:gray; width:300px} 
p{margin-top:50px} 

Это результат:

Ну, но когда я добавляю padding-top в .block, результат отличается:

.block{background: gray; width:300px; padding-top:1px} 
p{margin-top:50px;} 

Результат:

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

Вы можете оформить на скрипки: http://jsfiddle.net/YFU2f/2/ и http://jsfiddle.net/YFU2f/3/

Answer 1

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

В вашем примере верхнее поле, которое вы определили на элементе p, обрушивается с верхним краем элемента body (как правило, 8 пикселей по умолчанию), поэтому в конце расстояние между верхней частью холста и верхняя часть поля содержимого p составляет 50 пикселей. Если вы вводите заполнение, оно становится 8px + 1px + 50px = 59px. Вы также можете заметить крах маржи, взглянув на фон div: когда маржа рушится, это похоже на то, что маржа 50px была объявлена ​​только для body.

Вы можете найти все детали в спецификации: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 2

вам нужно использовать дисплей в качестве блока р

p{margin-top:50px;display:inline-block;}