br altura de línea en safari y cromo dejando espacio

Question

En mi HTML tengo un div y dentro del div tengo un espacio vertical diferente entre las líneas de texto. Lo logro utilizando saltos y definiendo la altura, es decir, <br /><br class="height5" /> o height2 o height10 o lo que sea.

En mi hoja de estilo lo defino como:

br.height2 {line-height: 2px;} br.height5 {line-height: 5px;}

Esto es trabajar en IE6 + + y FF2 Opera, pero por alguna razón hay enormes lagunas en Safari y Chrome (al igual que los dos navegadores están ignorando y simplemente aplicando descansos regulares). Intenté probar con alturas de línea mayores, como 20px o 30px, y Safari y Chrome las reconocen. Parece que ignoran cualquier cosa con 5-10 píxeles.

¿Ayuda? ¡Gracias!

Answer 1

Esos navegadores pueden estar leyendo su espacio en blanco (retorno de carro, etc.) y manteniéndolo abierto con un tipo de valor & nbsp; Sugiero usar varias etiquetas div y diseñar los divs con los atributos de margen inferior del espacio que desee.

<div style="margin-bottom: 2px">content</div> 
<div style="margin-bottom: 5px">content</div> 
<div>content</div> 

Answer 2

Esto funcionó en Chrome (el atributo content hizo el truco):

br { 
    content: " "; 
    display: block; 
    margin: 1em; 
} 

Answer 3

Sé que esto es viejo, pero mi respuesta aquí es multi-navegador sin necesidad de encender br en un bloque

/* line height can be set to whatever you want*/ 
br {line-height: 0.1; content: " "} 

Answer 4

Prueba esto:

br { line-height: 1em; } 

o:

br { margin-top: 2em; } 

Answer 5

Esto funcionó para mí, tanto para Firefox y Chrome. Tengo la idea de @SamuelC y @anushr.

br{ 
    display: block; 
    line-height: 0.1; 
    content: " "; 
}