1

Есть следующая структура

.container {
  display: inline-block;
  border: 1px #888 solid;
  background-color: forestgreen;
  font-size: 60px;
}
.content {
  display: inline-block;
  overflow: hidden;
  background-color: #EFA;
  line-height: 2em;
}
<span class="container">
  <span class="content">
    Text
  </span>
</span>

Мне непонятно, почему появляется пустое пространство внутри контейнера внизу, т.е. высота внешнего блока получается большей, чем нужно. Если же для внутреннего блока не указывать overflow: hidden; то высота внешнего блока становится меньше, и пустое горизонтальное пространство исчезает.

Можно ли при overflow: hidden; Добиться того, чтобы пустого пространства не было?

2 ответа 2

0

В контенте убрали inline и больше не появляется пустого пространства

.container {
  display: inline-block;
  border: 1px #888 solid;
  background-color: forestgreen;
  font-size: 60px;
}
.content {
  display: block; //Здесь убрали inline
  overflow: hidden;
  background-color: #EFA;  
  line-height: 2em;
}
<span class="container">
  <span class="content">
    Text
  </span>
</span>

0

.container {
  display: inline-block;
  border: 1px #888 solid;
  background-color: forestgreen;
  font-size: 60px;
}
.content {
  display: inline-block;
  overflow: hidden;
  background-color: #EFA;
  line-height: 2em;
  vertical-align: top; /* !!!!!!!! */
}
<span class="container">
  <span class="content">
    Text
  </span>
</span>

1
  • Спасибо, это работает, но дальнейшее исследованные показало одну странную особенность. См. ниже. 3 ноя 2015 в 11:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.