Вопрос по html, css, overflow, height – переполнение: скрыто на встроенном блоке добавляет высоту к родителю

34

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

У меня есть несколько вложенных 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; 
}

И это выглядит так:

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

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

Вот образец:http://jsfiddle.net/w8dfU/

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

Я думаю, что этот пост полностью ответит на ваш вопросstackoverflow.com/questions/9273016/... Maksym Stepanenko
просто используйте inline, а не inline-block, и ваша проблема будет решенаjsfiddle.net/w8dfU/1 San
@Alohci Ваш комментарий также был очень полезен, если вы сделаете ответ, я приму его stralsi
@MaksymStepanenko спасибо, ответы на этот вопрос действительно прояснили проблему для меня. stralsi
Технический ответ заключается в том, чтоoverflow:hidden перемещает базовую линию встроенного блока. По умолчанию стойка линейного блока ограничена тем же базовым блоком, что и встроенный блок, поэтому строковый блок и содержащий его div должны увеличиваться по высоте, чтобы в них содержался спусковой элемент распорки. Но верхний ответ по ссылке, которую дает Максим Степаненко, объясняет проблему гораздо яснее. Alohci

Ваш Ответ

4   ответа
1
.child{
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
    vertical-align: top;
}
Хотя этот код может ответить на вопрос, предоставляя дополнительный контекст относительноПочему и / иликак ответ на вопрос значительно улучшит его долгосрочную ценность. пожалуйстаредактировать Ваш ответ, чтобы добавить некоторые объяснения. Toby Speight
58

авил это с помощью vertical-align: top на моих элементах inline-block.

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;
}
Это не работает на IE. Есть идеи как там решить? Buzinas
Действительно, вертикальное выравнивание: верх был решением. Вот объяснение, почему:brunildo.org/test/inline-block.html stralsi
Благодарю вас! Это было так круто Rexhin Hoxha
Я так ненавижу CSS Это абсолютно и совершенно бессмысленно, что такое поведение происходит. Спасибо за эту работу, и я вместе надеюсь, что мы сможем изгнать создателей CSS в самые глубокие и неизбежные состояния ада. B T
0

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

8

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

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

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

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

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

Похожие вопросы