minimum - traduccion - ¿Por qué la propiedad CSS ''altura de línea'' no me permite crear espacios de línea ajustados en Chrome?
style line height html (4)
Tengo una etiqueta de párrafo que definí en otro lugar con una altura de línea de 15px, y tengo otra etiqueta de párrafo más abajo en la página donde quiero que la altura de la línea sea de alrededor de 10px. Lo curioso es que no me deja bajar a 10px ni nada más pequeño que eso, pero cuando lo configuro en 25px o más, la propiedad de la línea de altura parece estar funcionando.
Revisé el CSS relevante (todos codificados a mano) a través de las herramientas de desarrollo web del navegador Chrome (la versión de Chrome de Firefox''s Firebug) y no pude encontrar nada relevante. ¿Existe un error de CSS común que me impide reducir la altura de la línea más allá de una cierta cantidad mínima?
Después de probar esto en IE 8-11, Firefox 38.0.1 y Chrome 43, el comportamiento es el mismo: los elementos en línea tienen una altura de línea mínima que no bajarán. Parece que esta altura mínima proviene de la especificación de CSS :
En un elemento contenedor de bloque cuyo contenido se compone de elementos de nivel en línea, ''line-height'' especifica la altura mínima de los cuadros de línea dentro del elemento. La altura mínima consiste en una altura mínima sobre la línea de base y una profundidad mínima debajo de ella, exactamente como si cada cuadro de línea comenzara con un cuadro en línea de ancho cero con las propiedades de fuente y altura de línea del elemento. Llamamos a esa caja imaginaria un "puntal".
Si desea mantener algunos beneficios de los elementos en línea, puede usar display: inline-block . También puedes usar display: block . Ambos te permitirán hacer la altura de línea que desees en todos los navegadores que probé.
Dos preguntas relacionadas para más lectura:
¿Por qué la altura de la línea de la espada es inútil?
El navegador parece tener una altura de línea mínima en este bloque que contiene texto. ¿Por qué?
He notado, tanto en Firefox como en Chrome, que si configuras el doctype HTML5, hay una altura de línea mínima para los elementos en línea. Para los elementos de bloque, puede establecer la altura de línea en lo que desee, incluso hacer que las líneas se superpongan.
Si no configura el doctype HTML5, no hay una altura de línea mínima para los elementos de bloque o en línea.
Me encontré con el mismo problema, trabajé bien con:
.element { display: block; line-height: 1.2; }
la altura de línea es relativa al tamaño de fuente, no puede ir más bajo que eso a menos que declare un margen negativo.