2012-10-12 18 views
23

http://jsfiddle.net/mJxn4/¿Por qué no puedo disminuir la altura de línea de este texto?

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.

+0

Empecé con HTML/CSS local primero; luego extraje solo la pieza con la que tuve el problema y la publiqué en JSFiddle, y eso parece ser el mismo. ¿Podría ser el navegador? Estoy usando Safari. – daGUY

+0

Creo que está funcionando bien, puedes poner la altura de la línea: 40px para ver lo diferente, ya que con el tamaño de la fuente: 13 y la altura de la línea: 17, se ve similar. – Osify

+0

@mtr El OP ya dijo que era posible aumentarlo, pero no disminuirlo. – Daedalus

Respuesta

36

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.

+0

Pero el padre (' #others .item') no tiene un 'line-height' en mi ejemplo. ¿Simplemente pasa por el navegador predeterminado 'line-height' entonces? – daGUY

+0

la altura de línea predeterminada está establecida en automático. – Ibu

+0

Ah, tienes razón: al especificar una "altura de línea" inferior en el elemento primario, puedo bajar el 'valor de altura de línea 'de' em' al mismo valor. – daGUY

-1

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

4

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; 
} 
+1

pantalla: bloque funcionó para mí. Gracias – khurram

Cuestiones relacionadas