css - otro - ¿Por qué overflow: hidden agrega altura adicional a un elemento de bloque en línea?
overflow css3 (3)
En este ejemplo ...
HTML
<body>
<div>
<div>foo bar</div>
</div>
</body>
CSS
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
¿Por qué el overflow: hidden causa una barra de desplazamiento vertical? Además, ¿por qué esta altura no se atribuye a nada en la página? Es como un margen invisible.
La altura del 100% de todos los elementos es intencional. En teoría, eso debería hacer que la división más interna se expanda para cumplir con la ventana gráfica. ¡Y lo hace! ... mientras overflow: hidden no está ahí, ¿por qué?
Agregar overflow: hidden en el div padre no era una opción para mí, y también debido a la estructura de mi HTML no funcionaba.
Sin embargo, gracias al comentario de @Tony Gustafsson en el OP, noté que esto soluciona el problema:
div div {
vertical-align: bottom;
}
La altura adicional es la misma altura que la diferencia de altura entre vertical-align: baseline , y vertical-align: bottom . La "línea descendente". De ahí es de donde provienen los "5 píxeles extra" aparentemente aleatorios. Si el tamaño de la fuente es 10 veces más grande, esta brecha también será 10 veces más grande.
Además, parece que cuando el overflow: hidden no está allí, el elemento de inline-block tiene su línea de base como la misma línea de base de su última línea de texto.
Esto me lleva a creer que el overflow: hidden obliga a la línea base de todo el elemento del inline-block a estar en la parte inferior del elemento. Aunque no hay texto allí, el elemento primario del elemento de inline-block reserva espacio para la línea descendente. En el ejemplo dado en la pregunta, no se puede ver fácilmente ya que el elemento primario del elemento de inline-block tiene height: 100% . Entonces, en cambio, ese espacio adicional reservado para la línea descendente se desborda de ese div padre.
¿Por qué este espacio sigue ahí, aunque no haya texto? Creo que eso se debe a que el inline-block en línea crea un contexto de formato en línea, que es lo que causa este espacio. Si este elemento fuera un block , solo crearía este contexto de formato en línea una vez que encuentre un elemento o texto en línea.
Esto es solo una teoría, pero parece explicarlo. También explica por qué la respuesta de @Jonny Synthetic funciona: agregar desbordamiento: oculto para el padre oculta esa línea descendente adicional.
Gracias a @Hashem Qolami por los jsbins que me dieron esta teoría.
Los artículos con una altura del 100% deben tener desbordamiento: también ocultos . La primera regla de css solo apunta al div exterior, el desbordamiento oculto se aplica al div interior.
Jsfiddle con este CSS y funcionó bien:
body, html, div {
height: 100%;
margin: 0px;
padding:0px;
overflow: hidden;
}
div div {
display: inline-block;
overflow: hidden;
}