CSS: Especificar line-height con o sin unidades

La semana pasada me preguntaba una persona porqué cuando aplica la declaración line-height (altura entre líneas) de 1.4em a la etiqueta “body” (o a cualquier contenedor) esta no se aplicaba a todos los elementos que están en su interior en función de su tamaño. Es decir, si hay elemento “p” en el interior del contenedor con 14px, el 1.4em debería estar relacionado con los 14px. Si hay un elemento h1 que tiene 28px, el 1.4 em debería estar relacionado con los 28px, etc..

Esto no es así, por ello Eric Meyer suele recomendar que el atributo line-height se especifique sin unidades (http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/).
Supongamos el siguiente código:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Como vemos, tenemos el elemento body al que aplicamos un tamaño de texto de 14px y un line-height de 1.4em. Lo primero sería suponer que cuando lleguemos al elemento h1, que tiene un tamaño de 30px, la distancia entre líneas sea de 30px*1.4em y que cuando lleguemos al elemento p con la clase “small” la distancia entre líneas sea de 10px*1.4em. Sin embargo vemos claramente que no es así. La distancia para todos ellos se calcula en relación a los 14px que hemos puesto en el body:

Vemos que los h1 se solapan y los p.menor están demasiado separados. Los “p” normales están bien porque tienen el tamaño predefinido en “body” y el line-height pensado para dicho tamaño. Esto nos obliga a crear casi tantos line-height como tamaños tengamos para los diferentes elementos en nuestro HTML (en este caso uno para los h1 y otro para los p.menor).

¿Cómo solucionarlo? Muy facil: no poniendo unidades en la declaración line-height. En este caso si hubiéramos escrito:

Ahora sí se aplica el multiplicador 1.4 a cada elemento y su tamaño:

Nota: el problema hubiera sido el mismo si en vez de poner “em” hubiéramos puesto un porcentaje en el line-height (por ejemplo 100%)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *