html - lista - estilos para div css

desbordamiento: oculto en el bloque en línea agrega altura al padre

Question

Estoy seguro de que esto se ha preguntado antes de alguna forma u otra, pero simplemente no puedo encontrar una respuesta.

Tengo algunos divs anidados

<div class="parent">
<div class="child">A</div>
</div>

Y el niño tiene pantalla: bloque en línea y desbordamiento: oculto

.parent{
background-color:red;
}
.child{
background-color:green;
display:inline-block;
overflow:hidden;
}

Y se renderiza así:

Puedes notar que el padre es 5px más alto que el niño.

¿De dónde viene la altura extra?

Aquí está la muestra: http://jsfiddle.net/w8dfU/

Editar: No quiero eliminar la visualización: bloque en línea o desbordamiento: oculto, este es un ejemplo simplificado para ilustrar el problema, pero en mi diseño real los necesito a ambos. Solo quiero entender por qué aparece esta altura adicional. ¿Está especificado en algún lugar que debería ser así? ¿Es una consecuencia de alguna otra característica CSS?

Answer 1

Este espacio extra proviene del overflow:hidden de la clase Child. Elimine esta propiedad y compruebe y si realmente desea utilizar el overflow:hidden propiedad overflow:hidden , utilice el margen negativo para la clase secundaria. Puedes eliminar este espacio extra.

Answer 2

La answer aceptada arriba es correcta, pero no da la explicación que estaba buscando. Una buena explicación fue proporcionada por @Alohci en su comment .

Explicación en pocas palabras:

• El valor de vertical-align es baseline , por lo tanto, el div infantil está alineado con la línea de base del texto.

• Esta línea de base de texto no es lo mismo que la línea inferior. Está un poco más arriba, para acomodar las letras con los descensores: p, q, g.

• Esta es la razón por la que el problema se soluciona al establecer vertical-align: top .

Answer 3

Tuve este problema al construir un control deslizante horizontal. Lo arreglé con vertical-align: arriba en mis elementos de bloque en línea.

ul {
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
ul&::-webkit-scrollbar {
display: none;
}
li {
display: inline-block;
vertical-align: top;
width: 75px;
padding-right: 20px;
margin:20px 0 0 0;
}

Answer 4

.child{
background-color:green;
display:inline-block;
overflow:hidden;
vertical-align: top;
}