Haz un espacio entre el párrafo (x) html, css

Quiero espacio entre mis etiquetas <p>content</p>. No antes y no después de <p> etiquetas. Fx mi código es:Haz un espacio entre el párrafo (x) html, css

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

No quiero espacio entre h1 yp que se hace con margen cero en h1. Pero no quiero espacio después de la última etiqueta <p>. ¿Es esto posible sin: last-child o alguna js/jQuery?

No puedo establecer class = "last" en la última etiqueta porque es un sistema CMS.

Fuente

2009-09-23 Lasse Espeholt

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

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

Fuente

2009-09-23 06:13:31 Quentin

la forma en que * debería * hacerse – annakata

Bien, lo intentaré. Estoy apuntando a IE7 +, Chrome, Safari 4+, FireFox 2+ –

funciona perfectamente :) gracias. –

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

Fuente

2009-09-23 06:11:01

Gracias por responder, pero no puedo controlar el texto de esa manera. (CMS) –

Establezca un margen inferior predeterminado para p, luego otorgue a la última etiqueta una clase sin margen inferior.

Fuente

2009-09-23 06:13:28 da5id

IE safe way – annakata

No puedo hacer eso porque el texto se representa con CMS. –

OK entonces, ¿qué tal si configura margin-top en "div p" y negative margin-bottom en "div h1"? – da5id

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

Fuente

2009-09-23 06:13:54

Gracias por responder, pero no puedo controlar el texto de esa manera. (CMS) –

Si usted no está obligado a apoyar IE6 que puede utilizar:

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

Si Necesito soportar IE6, este 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 usar, por ejemplo, 1em para los márgenes de balanceo ya que tienen diferentes tamaños de fuente. Puede ajustar manualmente según sea necesario o usar anchuras de píxeles.

Fuente

2009-09-23 06:19:34 cletus

Pero el problema con el último método es que si tengo una lista después de la h1, flotan entre sí. Iré con IE7 +. –

Si puede ir con IE7 +, entonces está ordenado. Solo estoy señalando esto para que esté completo porque muchos necesitan soportar IE6 aún (tristemente). – cletus

Además, vale la pena señalar que no recomendaría hacer esto para todos los divs. Asignaría una clase para poner en el div donde quieras hacer esto, donde conozcas el formato de los contenidos para evitar la situación que mencionas. El mismo encabezado seguido por el problema de la lista tiene el mismo problema con el uso del selector +. – cletus

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

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 complicado de lo que me gusta, pero cuando estás a merced del código generado por CMS sin forma de agregar clases, debes ser creativo.

Fuente

2009-09-23 18:07:54 rhodesjason

Sí, cletus también mostró esto, pero gracias. –

Haz un espacio entre el párrafo (x) html, css

Respuesta

Cuestiones relacionadas