Hacer un espacio entre el párrafo (x) html, css
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.
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.