Сделайте пробел между абзацем (x) html, css

Question

Мне нужно место между моими <p>content</p> тегами. Не раньше и не после <p> тегов. Fx мой код:

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p>Some text</p> 
</div> 
Something 

Мне не нужно пространство между h1 и p, которое выполняется с нулевым пределом на h1. Но я не хочу места после последнего тега <p>. Это возможно без: last-child или js/jQuery?

Я не могу установить class = "last" в последнем теге, потому что это система CMS.

Answer 1

p + p { 
    margin-top: 1.5em; 
} 

(Хотя это требует браузер с улучшенной поддержкой CSS, чем IE6)

Answer 2

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <div class="paragraph-space"></div> 
    <p>Some text</p> 
</div> 

?

Answer 3

Установите нижний предел по умолчанию на p, а затем дайте последнему тегу класс без нижнего поля.

Answer 4

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p style="margin-bottom: 0;">Some text</p> 
</div> 

Answer 5

Если вы не обязаны поддерживать IE6, вы можете использовать:

div, h1, p { margin: 0; } 
p + p { margin-top: 12px; } 

Если вы необходимо поддерживать IE6, это грязный хак, но он работает без Javascript:

div, h1, p { margin: 0; } 
h1 { margin-bottom: -12px; } 
p { margin-top: 12px; } 

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

Answer 6

Если вы хотите сделать его более совместимый браузер, вы также можете использовать:

p { margin-top: 24px; } 
h1 { margin-bottom: -24px; } // play with this value as necessary 

Отрицательные поля будут тянуть элементы к ним. Это беспорядочно, чем мне нравится, но когда вы находитесь на милости CMS сгенерированного кода без возможности добавления классов, вы должны быть творческими.