2012-08-09 15 views
5

La altura de los elementos del bloque se ve afectada por el tamaño de la fuente del contenido, ¿verdad?tamaño de letra Afecta la altura del elemento del bloque?

que lo mejor es simplemente lo que quiero decir mostrar, mira este ejemplo fiddle

Si aumenta el tamaño de la fuente de la clase .p dentro del div, la altura de la div aumenta también, ¿por qué es esto?

+0

u necesita div flexible? – Lukas

+0

Creo que http://jsfiddle.net/DtcFn/6/ es un mejor violín en el que creo que muestra los cambios de los que estás hablando. Esto, con suerte, hará que sea más obvio para las personas qué cambios y de qué tamaño está hablando. – Chris

+0

yes.it describe la pregunta de manera más intuitiva. Gracias – SKing7

Respuesta

1

Esto se debe a que no definió el height -propiedad en las hojas de estilo. El valor predeterminado es height: auto.

+0

La especificación de una altura para el div no impide que el espacio encima del texto, solo recorte el texto a esa altura. – Guffa

+1

@Guffa: ¿qué tiene que hacer el espacio de arriba? La pregunta era por qué está cambiando la altura y la razón es que la altura no estaba definida ... ¿Cuál es la altura que se adopta seguramente es un problema completamente diferente? – Chris

+0

@Guffa: Ah, entiendo lo que quiere decir, si aumenta el tamaño de fuente en la clase 'p' a más de 33px, entonces el div se hará más grande pero la fuente no cambiará. Intenté cambiar ese valor pero no lo suficientemente alto, por lo que el único tamaño de letra que encontré que marcó la diferencia fue el que cambia el texto. – Chris

1

Porque no tiene una altura establecida en el div.

Esto significa que el div se expandirá para adaptarse a su contenido, en este caso el elemento p.

Si no especifica una altura, estará predeterminado en height:auto.

+0

pero no hay ningún elemento que se vea afectado por el tamaño de fuente de div del nombre de clase es p – SKing7

+0

La especificación de una altura para el div no impide que el espacio encima del texto, solo clip el texto a esa altura. – Guffa

0

debe configurar la altura div, ver http://jsfiddle.net/VpeW8/

+0

La especificación de una altura para el div no impide que el espacio encima del texto, solo clip el texto a esa altura. – Guffa

7

Eso es debido a que el tamaño de la fuente de la div decide donde la línea de base para el texto es, y el lapso que se coloca en la línea de base.

Aumentar el tamaño de fuente del div hace que la distancia por encima y por debajo de la línea de base sea más alta. Es el contenido del tramo interior el que da el tamaño del elemento, por lo que solo es la distancia sobre la línea de base la que afecta el tamaño, no la distancia debajo de la línea de base, por lo que verá que se está presionando el texto, pero no hay espacio debajo del texto.

+0

oh.le agradezco. Si hay algunos documentos sobre esto. Por ejemplo, en el documento w3 – SKing7

+0

¿cómo dosifica el tamaño de fuente decidir la línea de base? – SKing7

+0

@ SKing7: el tamaño de la fuente establece la altura del texto, pero la altura de la línea lo limita.Ponga algunos caracteres fuera del tramo para ver cómo les afecta el tamaño de la fuente y la altura de la línea: http://jsfiddle.net/Guffa/DtcFn/7/ – Guffa

0

Porque la altura de la línea se calcula de acuerdo con el tamaño de la fuente. Para evitar que el div se expanda en respuesta al tamaño de fuente, establezca explícitamente la propiedad de altura de línea en CSS.

Cuestiones relacionadas