Pregunta

Quiero espacio entre mis etiquetas <p>content</p>. Ni antes ni después de las etiquetas <p>. FX es mi código:

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

No quiero espacio entre h1 y p, que se realiza con margen cero en h1. Pero no quiero espacio después de la última etiqueta <p>. ¿Es esto posible sin: el último niño o algunos JS / jQuery

?

No puedo definir class = "último" en la última etiqueta, ya que es un sistema CMS.

¿Fue útil?

Solución

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

(Aunque esto requiere un navegador con mejor soporte para CSS que IE6)

Otros consejos

Si usted no está obligado a apoyar IE6 puede usar:

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

Si necesita apoyar IE6, esto es un truco sucio, pero funciona sin Javascript:

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

La desventaja de este método es que no se puede simplemente usar, por ejemplo, 1 em de los márgenes de equilibrio, ya que tienen diferentes tamaños de fuente. O se puede ajustar manualmente según sea necesario o utilizar anchos de píxeles.

Establecer un fondo de margen predeterminado de p, a continuación, dar la última etiqueta de una clase sin fondo margen.

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

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

Si desea hacerlo más compatible en el navegador, también se puede usar:

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

márgenes negativos se tire de los elementos hacia ellos. Es más desordenado que me gusta, pero cuando estás a merced de CMS genera el código y no hay forma de añadir clases, usted tiene que ser creativo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top