¿Por qué un párrafo se vuelve más alto cuando un espacio contenido se hace más pequeño?

En Firefox y Chrome y Safari (todos los más recientes, en Mac 10.6.8) si uso las herramientas de desarrollo de un navegador para reducir el tamaño de fuente del siguiente lapso, puedo ver la altura (altura de línea) del párrafo incrementar por unos pocos píxeles:

<p style="line-height: 40px; background: red;">
    Some sample text some sample text.
    <span style="font-size: 100%;">As this span's text size gets smaller, the paragraph gets taller.</span>
</p>

¿Alguien puede explicar por qué sucede esto?

preguntado el 01 de febrero de 12 a las 22:02

¡Este es un problema fascinante! Lo más interesante es que el párrafo se carga con la altura de línea incorrecta (41 px) y luego asume la correcta (40 px) después de que el tamaño del intervalo se reduce al 96%. -

No he probado esto, pero intente configurar display: inline-block para span. Cuando tengo este tipo de problemas, esta solución suele funcionar ... -

1 Respuestas

Ok, publiqué su html de muestra y css en línea en js fiddle, aquí está el enlace:

http://jsfiddle.net/sauhL/

Luego usé firebug para cambiar font-size:100%; hasta 99, 98 y así sucesivamente. Tienes razón, cuando bajas 1 por 1 para el valor del tamaño de fuente, el cuadro rojo se vuelve un poco más grande por un segundo.

El problema es que tiene la altura de la línea predeterminada como 40px, lo que causa lo que llamó un 'error' porque la altura de línea aplicada a diferentes tamaños de fuente conduce a diferentes representaciones de altura, y en el caso de js fiddle, el salto de línea también es un factor en la 'representación' de la altura del cuadro rojo. Después de bajar varios puntos en %, no hay más expansión del cuadro rojo, sino más bien una disminución de tamaño.

Esto se soluciona fácilmente aplicando line-height:100% al tramo que normaliza la altura y se asegura de que no haya incrementos impares. Puede esperar este tipo de 'errores' o anomalías al mezclar valores fijos (digamos 40px por ejemplo) con valores porcentuales (100% o lo que sea).

Espero que esto resuelva tu pregunta

Respondido 07 Feb 12, 05:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.