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

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

У меня есть несколько вложенных div

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

И у ребенка есть отображение: inline-block и overflow: hidden

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

И он получается таким: enter image description here

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

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

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

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

Ответы

Ответ 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;
}

Ответ 2

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

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

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

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

  • Вот почему проблема исправлена ​​установкой vertical-align: top.

Ответ 3

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

Ответ 4

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