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;
}