¿Por qué el relleno de span hace que el cuadro de representación se superponga a su elemento primario?

Question

Consulte este jsfiddle por ejemplo: http://jsfiddle.net/FrJRA/1/ y tenga en cuenta que el borde del tramo interior se superpone con el div que lo contiene.

Entiendo algo de lo que está pasando. Pero no entiendo por qué. ¿Por qué no se aumentó el tamaño del div para permitir la nueva altura del span?

Sé que puedo usar display: inline-block si deseo que esto suceda, pero ¿cuál es el razonamiento detrás de inline que no puede aumentar el tamaño del contenedor principal?

Answer 1

Los elementos en línea solo cambian sus dimensiones para el relleno en las dimensiones izquierda/derecha. No aumenta la dimensión del elemento en las direcciones superior/inferior. Es por eso que nota que lo aumenta en los lados, pero no en la parte superior/inferior.

Actualización: Encontramos la parte de la especificación W3 que toca esto.

El relleno vertical, borde y margen de una línea, no sustituido inicio cuadro en la parte superior e inferior del área de contenido, y no tiene nada que ver con el 'line-height'. Pero solo la 'altura de línea' se usa cuando calcula la altura del cuadro de línea. CSS 2.1 Spec

Answer 2

Los elementos en línea simplemente no tienen el propósito de afectar la disposición, por eso block o inline-block voluntad, sino la duración de inline no lo hará.

Answer 3

El <div> no está destinado a cambiar el tamaño en este caso. Como <span> es un elemento en línea.

Si esto es la funcionalidad que busca modificar

div, span { 
    border: 1px solid gray; 
} 

con overflow:auto;

div, span { 
    border: 1px solid gray; 
    overflow:auto; 
}