Маржа, не добавляющая элементы?

Question

У меня следующий код

<h1>Test</h1> 
<p>Another test</p> 
h1 
{ 
border:2px solid red; 
margin-bottom:30px; 
} 
p 
{ 
border:2px solid red; 
margin-top:20px; 
} 

Живая скрипка здесь http://tinkerbin.com/dnhA713P

Я хочу иметь 50px пространство между h1 и p, но его не получает 50px пространство.

Answer 1

Это называется разрушилась поля. Вот хорошая статья для смертных:

http://reference.sitepoint.com/css/collapsingmargins

А вот спецификации для остальной части Вас:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

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

Answer 2

Я не вижу, как это не сработает ... но вы получите только 30px margin. Больший запас имеет приоритет. Вы также можете попробовать обернуть их в <div> элементах и ​​присвоить поле 50px одному из двух.

http://jsfiddle.net/LuDvL/

<div id="header"> 
    <h1>Test</h1> 
</div> 

<div id="content"> 
    <p>Another test</p> 
</div> 

/* either one of these should work */ 
#header { margin-bottom: 50px; } 
#content { margin-top: 50px; } 

Answer 3

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

Answer 4

Я считаю, что причина вы не получаете ваши ожидаемые результаты, потому что, так как вы уже давшей h1 элемент маржин-дно 30px, в p элемента уже имеет маржу, превышающую ее, равную 30px, поэтому заявив, что она имеет margin-top 20px, ничего не делает. Попытайтесь дать элементу p margin-top of 40px и посмотреть, что разница между ними увеличивается на 10 пикселей.

Answer 5

Мое предложение состоит в том, что вы не можете добавить поля h1 или p тегов, так как те, так называемые inline Elements и их значение по умолчанию для свойства CSS displayinline является. Поэтому вам нужно изменить это на display:block;, тогда вы сможете добавить маржу и прокладки.