¿Por qué no puedo disminuir la altura de línea de este texto?

Question

http://jsfiddle.net/mJxn4/

Esto es muy extraño: Tengo unas pocas líneas de texto envueltos en una etiqueta <em>. No importa lo que haga, bajar el valor de line-height por debajo de 17px no tiene ningún efecto. Puedo subir el line-heighthasta a más de 17px y se aplicará, pero no puedo obtenerlo a menos de 17px.

El CSS en cuestión es:

#others .item em { 
    font-size: 13px; 
    line-height: 17px; 
} 

intente ajustar la altura de la línea tanto superiores como inferiores y ejecutar el violín actualizado después de cada cambio, y verá lo que quiero decir.

¿Por qué sería esto? No line-height se especifica en ningún otro lugar en el CSS, por lo que nada lo anula. Ese no podría ser el caso de todos modos porque estoy ajustando el line-height hacia arriba y hacia abajo dentro del mismo selector, por lo que no tiene sentido que se aplique un valor más alto, pero se anularía un valor inferior.

Answer 1

Puesto que la etiqueta es em en línea y su línea de altura no puede ser inferior a su padre div.

Por ejemplo, si establece la altura de línea del elemento primario en 10px, entonces podrá disminuir la altura de línea de la etiqueta em a 10 px también.

Answer 2

Usted parece estar utilizando la opción normalized css en jsFiddle - lo que equivale a las reglas CSS que se restableció - Ala http://meyerweb.com/eric/tools/css/reset/

Usted puede reajustar el reajuste, o usar un restablecimiento diferente si realmente lo necesita.

ver aquí para más detalles:

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

Answer 3

La mejor manera de hacerlo es usando css reset.

Escribe tu propia o utilizar una popular como

http://meyerweb.com/eric/tools/css/reset/

Answer 4

La forma más sencilla consiste en especificar la altura de la línea con una prioridad más alta, por ejemplo, usted podría escribir: line-height: 14px! Important;

Si todavía no está funcionando, establezca la prioridad en donde desea disminuir la altura de la línea (css en línea) y también poner en el cuerpo css ... recuerde la prioridad más alta (! Important;) porque anula cualquier otra regla css desconocida.

Esperanza esto ayuda

Ahmed

Answer 5

que estaba frente a este problema con divs en vista móvil - la altura de la línea era demasiado grande y la línea de altura no funcionaba!Me las arreglé para hacer que funcione mediante la adición de "display: block", por consejo aquí: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

Espero que esto ayude a nadie más frente al mismo problema en el futuro

Answer 6

Para que la propiedad line-height a trabajar, div debe tiene una propiedad de visualización igual al bloque

.app-button-label{ 
    line-height: 20px; 
    display: block; 
}