La especificación CSS indica que la altura de línea debe aplicarse al texto dividiendo el valor especificado por dos y aplicando el resultado arriba y debajo de una línea de texto.Altura de línea CSS y encabezado tradicional
Esto varía significativamente de la comprensión tradicional de liderazgo, lo que generalmente significa que el espaciado se 'agrega' solo por encima de la línea de texto. (Sé que esto no es 100% correcto, porque en realidad la altura de línea no agrega espacio, pero establece la altura de la línea, sin embargo, de esta manera es más sencillo describir el problema).
Considere este ejemplo de marcado:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
margin:0;
font-size: 13pt;
line-height: 15pt;
}
h1
{
margin:0;
font-size: 21pt;
line-height: 30pt;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>
Si línea de altura era igual a la comprensión tradicional de líder, entonces la distancia entre <h1> y la primera <p> sería igual a la distancia entre <p> 's, ya que esta distancia está definido por el líder. Sin embargo, éste no es el caso.
Mientras distancia entre <p> s permanece constante (p's line-height - p's font-size = 15 - 13 = 2pt), distancia entre <h1> y la primera <p> es diferente: es igual a (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.
Esto se puede notar fácilmente a simple vista si el marcado anterior se procesa con un navegador.
El problema es que la forma tradicional de mantener el ritmo visual vertical en una página es mediante el establecimiento de los elementos principales en múltiplos de la base. Este método no es aplicable en CSS, como se muestra arriba.
Tengo 3 preguntas:
- Es mi comprensión de la línea de altura, lo que lleva y sus diferencias correcta?
- ¿Hay alguna manera de mantener el ritmo vertical con CSS (imitando el estilo tradicional con CSS o no)?
- (Pregunta de bonificación) ¿Cuál fue el razonamiento detrás de hacer que la altura de línea sea tan diferente de la delantera?
ACTUALIZACIÓN: muchas gracias por sus comentarios! Tenga en cuenta que me sugirió mi propia solución y yo estaría muy agradecido por cualquier comentario sobre él: https://stackoverflow.com/a/8335230/710356
Gracias! Sin embargo, parece que la demostración a la que se ha vinculado es un archivo gif vacío. Además, no veo ningún valor negativo en tu código. – sbichenko
Disculpe, arreglé el enlace y recordé que no usé valores negativos. :-) – bookcasey
No necesita usar posicionamiento para mantener el ritmo vertical en realidad. Se puede hacer asegurando una línea de altura uniforme (en relación con el tamaño de la fuente) y el margen inferior. – joshnh