Сделайте пробел между абзацем (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

Если вам не требуется поддерживать 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 3

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

Answer 4

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

?

Answer 5

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

Answer 6

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

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

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