Почему родительский блок больше по высоте чем дочерний?

Question

[DZHAMBUALT]

Здрасте. У меня есть некий блок в котором есть item. Почему при min-widht и min-height, а также при фиксированных размерах дочернего элемента родительский блок по высоте становиться больше.

<div class="container">
      <ul class="block">
        <li class="block-item"></li>
      </ul>
    </div>

.container {
  width: 100%;
  min-height: 100vh;
  background-color: bisque;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  background-color: red;
  display: inline-block;
}
.block-item{
  min-width: 200px;
  min-height: 300px;
  background-color: rgb(0, 174, 255);
  display: inline-block;
}

Comments

[szQocks]

https://ru.stackoverflow.com/questions/609992/Отст...

[szQocks]

вот только непонятно почему он снизу, обычно между инлайн элементами должен быть, но может быть потому что элемент всего лишь 1, хз

но скорее всего из-за какого-то там свойства, типа line-height и т.д, не советовал бы забивать этой фигнёй голову до профессионального уровня, просто знать что инлайн элементы имеют отступ - достаточно

а вспомнил, потому что у ul по умолчанию display block, или даже если переназначить на display: inline-block; направление не изменится, будет одно и тоже, поэтому отступ снизу появился, но всё равно я думал он должен быть между инлайновыми элементами, но похож каждый инлайновый элемент создаёт отступ

[Сергей delphinpro]

szQocks,

вот только непонятно почему он снизу

Почему не понятно? В строковом контексте между строками подразумевается наличие некоторого промежутка. Но присутствует он только при выравнивании по базовой линии (vertical-align: baseline), это значение по умолчанию. Стоит изменить на любое другое значение, и отступ пропадёт.

[szQocks]

Сергей delphinpro, да, вы правы)

Answer 1

[Ankhena]

Для .container задан flex. Значит, задавать для .block inline-block - бесполезно, потому что будет всё равно блок (если мы не будем сейчас думать о "на всякий случай").
Но уже внутри .block есть дочерний элемент .block-item тоже имеющий inline-block.
А после них браузер делает "пробел". И то, что вы видите красное - это он и есть.

Как лучше чинить зависит от макета, вашей схемы недостаточно. Ну разве что банальные советы поменять на флекс или обычный блок или разобраться с vertical-align.