переполнение: скрытое на встроенном блоке добавляет высоту родительского

Question

Я уверен, что это было предложено ранее в той или иной форме, но я просто не могу найти ответ ..

У меня есть вложенные дивы

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

и ребенок имеет дисплей: встроенный блок и переполнения: скрытый

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

и визуализируется как это:

Вы можете заметить, что родительский элемент на 5px выше, чем ребенок.

Откуда возникает дополнительная высота?

Вот пример: http://jsfiddle.net/w8dfU/

Edit: Я не хочу, чтобы удалить дисплей: встроенный блок или переполнения: скрытый, это упрощенный пример, чтобы проиллюстрировать эту проблему, но в моей реальной макет Мне они нужны оба. Я просто хочу понять, почему эта дополнительная высота появляется. Является ли он где-то указанным, что это должно быть так? Является ли это следствием какой-либо другой функции css?

Answer 1

У меня возникла проблема при построении горизонтального слайдера. Я установил его с вертикальным выравниванием: сверху на мои элементы встроенного блока.

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 2

Это дополнительное пространство, исходящее от overflow:hidden Детского класса. Удалите это свойство и проверьте, и если вы действительно хотели использовать свойство overflow:hidden, тогда используйте отрицательный запас для дочернего класса. Вы можете удалить это дополнительное пространство.

Answer 3

Принятая answer выше правильно, но это не дает объяснения, что я искал. Хорошее объяснение было предоставлено @Alohci в его comment.

Объяснение в нескольких словах:

• Значение vertical-align является baseline, поэтому ребенок DIV выравнивается по базовой линии текста.

• Эта базовая линия текста не совпадает с нижней строкой. Это немного выше, чтобы разместить буквы с descenders: p, q, g.

• Вот почему проблема устранена установкой по вертикали: вверху.

Answer 4

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