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

Я хочу пространство между моим <p>content</p> теги. Ни до, ни после <p> теги. Форекс мой код:

<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.

6
html paragraph space xhtml

6 ответов

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

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

14

Если вы не обязаны поддерживать 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 для балансировки полей, поскольку они имеют разные размеры шрифта. При необходимости можно вручную настроить ширину пикселей или использовать ее.

4

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

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

?

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

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

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

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

0