¿Cómo lograr la consistencia adecuada CSS line-height

Mi regla CSS básico para font-size y line-height es bastante simple:¿Cómo lograr la consistencia adecuada CSS line-height

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
}

Cuando creo un párrafo que contiene un <em> o una <strong> (o incluso algunos <code> que usa un font-size diferente que el <body>), observo que estos elementos aumentan la altura de la línea en un píxel o dos.

Esto me lleva a creer que la mayoría de los navegadores toman el mayor elemento en línea para mostrar line-height. ¿Está bien?

Mi objetivo es hacer que el line-height sea consistente, independientemente de qué elementos estén en línea.

La única forma que he encontrado para hacer que el line-height coherente es definir:

em, strong, code, etc { 
    line-height: 100%; 
}

Es esta la forma correcta de hacer esto? ¿O estoy siendo demasiado perfeccionista?

Edición 1:

Esto también parece funcionar:

em, strong, code, etc { 
    line-height: 1; 
}

Edición 2:

Después de jugar con esto por unos pocos días, no parece que hay una solución confiable para mantener un line-height consistente. Si alguien tiene alguna idea, ciertamente me encantaría escucharla.

Datos 3:

Por mi propia referencia de futuro y de mi propia investigación, estas etiquetas deben ser considerados con line-height: 1, siempre y cuando se visualizan en línea, junto con otro texto estándar del cuerpo:

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q, 
samp, small, strong, sub, sup, tt, var

Estos elementos son cuestionables:

a, bdo, img, span

Fuente

2009-10-12 Jeff

El spec confirma lo que pensaba, que los navegadores tienen el tipo de letra más grande para el cálculo line-height. Eso significa que su única opción (y la que menciona la especificación) es establecer la altura de la línea para TODOS los cuadros en línea en las líneas que le interesan.Probablemente no esté satisfecho con los resultados de seleccionar body * y establecer el tamaño de la fuente. Así que añadir algunos Divs con la misma clase en todo lo que sea bloques de texto que desea buscar uniforme, y ahí lo tienes:

div.uniformlines * { 
    line-height: 100%; 
    font-size: 16px; 
}

Fuente

2009-10-13 17:26:03 WillfulWizard

¡Excelente información! ¿Qué pasa con 'p * {line-height: 0; } ', o mejor aún tal vez' p a, p code, p big {line-height: 0; } '? Ahora estamos llegando a algún lado. ';)' – Jeff

Seguimiento de mi último comentario. Ten cuidado con mi código de arriba. Si tiene, por ejemplo, '

foo

', la altura de línea se calculará en cero, que probablemente no sea la que desea. – Jeff

Creo que es una muy n comer idea.

Sin embargo, no olvide que si el texto en negrita/cursiva es demasiado grande, puede afectar la legibilidad haciendo que todas las líneas sean realmente altas cuando solo se necesita una. También es posible que desee algo para tratar con el superíndice y el subíndice, si su ejemplo no lo resuelve.

Fuente

2009-10-12 15:58:17 DisgruntledGoat

Ooooo sí, trabajando en sub y sup ahora, pero a punto de darse por vencido. Lol – Jeff

Hmm, acabo de regresar a esto y no creo que lo que publique sea correcto. Establecer la altura de la línea al 100% no lo mantiene constante: la línea con el texto más grande es más grande, pero las líneas posteriores vuelven a la normalidad. Su ejemplo de establecer la altura de la línea en 0 mantiene todas las líneas a su altura original; en este caso, debe asegurarse de que el texto más grande no se superponga con las otras líneas. – DisgruntledGoat

No veo este comportamiento, pero estoy usando WebKit. ¿Te sucede el problema si lanzas algunas etiquetas en negrita en este ejemplo?

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

Fuente

2009-10-13 10:16:52

Sí, seguro que sí (FF 3.0.x). Estoy trabajando en este problema ahora y no parece que haya una solución amistosa. – Jeff

Es mejor y más flexible parece definir body {line-height: 0} definir la línea de altura para las principales áreas de contenido con line-height: 1 o 1.5 o lo que sea. Eso le permite controlar los otros elementos de forma más dinámica y consistente.

Por ejemplo, la altura de línea puede ser muy problemática para imágenes u otras cuadrículas que desean alinearse alineadas entre sí, como una galería de estilo. Este suele ser el caso cuando las imágenes tienen etiquetas de anclaje, que heredan la altura de línea de su elemento primario. La especificación permite un valor "normal", pero parece ser un estándar diferente por navegador. 1 o 100% también son opciones, pero "0" básicamente hace que todos los navegadores fuercen el mismo estándar, como un buen restablecimiento de CSS. Por supuesto, todo el texto queda aplastado en una línea con "0", por eso es necesario establecer la altura de la línea en las áreas de contenido.

Here's a codepen I put together to illustrate the point

Fuente

2014-07-18 18:25:54

Este hilo es ya años y las cosas podrían haber cambiado desde entonces, pero el siguiente (que he redescubierto en http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/) funciona para mí:

* { 
    vertical-align: bottom; }

Es bastante sorprendente ya que vertical-align como tal, parece no estar relacionado con line-height; de nuevo, esto es CSS, así que nunca se sabe. El sitio web citado anteriormente, de hecho, sugiere

sub { 
    height: 0; 
    line-height: 1; 
    vertical-align: baseline; 
    _vertical-align: bottom; 
    position: relative; }

que parece un truco para mí.

Fuente

2015-01-21 05:12:07 flow

¿Cómo lograr la consistencia adecuada CSS line-height

Respuesta

Cuestiones relacionadas