elementos de bloque align en la parte superior cuando se utiliza line-height

Question

Si doy un line-height a un elemento de bloque como h1 añade el espacio por encima y por debajo de la línea de cada texto, significa que el elemento no empieza en la misma posición superior . ¿Qué pasa si solo quiero un espacio debajo de cada línea? Sé que vertical-align solo funciona con elementos en línea.

También reconocí que un texto de un elemento de bloque como una etiqueta p no está en la parte superior con altura de línea "normal", de forma predeterminada. Si agrego un color de fondo al elemento, el color también es visible a unos pocos píxeles sobre el texto. ¿Por qué?

Answer 1

TLDR: Use position: relative y un valor superior negativo para simularlo.

Explicación: Tienes razón. La altura de línea siempre se agrega encima y debajo de cada carácter. Entonces, si el tamaño de fuente es 12px y tiene una altura de línea de 18px, obtendrá 3px arriba y 3px debajo de cada "línea". Cada uno de esos espacios de 3px se llama "medio líder".

Sin embargo, puede usar position: relative con un valor superior negativo para que parezca que solo hay espacio agregado debajo de cada línea.

Digamos que desea tener 8px de espacio entre cada línea en lugar de solo 6px del ejemplo anterior (18px/12px = 6px = 3px en la parte superior + 3px en la parte inferior). Para hacer esto, aumente la altura de la línea de 18px a 20px para obtener el medio líder de 4px y otorgue un total de 8px de espacio entre las líneas. Luego agregue position: relative; top: -2px para restablecer la línea al mismo lugar donde estaba cuando la altura de la línea era 18px.

Aunque el navegador todavía está agregando 4px de espacio por encima y por debajo de cada línea, el posicionamiento vertical negativo hará que parezca que se cortó el espaciado superior adicional.