Чтобы понять это, вам необходимо знать разницу между BF C (контекст форматирования блока) и IF C (встроенный контекст форматирования.
Если в вашем контейнере есть только блочных элементов, это создаст BF C:
В контексте форматирования блока блоки размещаются один за другим, по вертикали, начиная с верхней части содержащего блока. Расстояние по вертикали между двумя соседними блоками определяется свойствами поля. Вертикальные поля между соседними блоками уровня блока в контексте форматирования блока сжимаются.
В этом случае для расчета высоты вашего контейнера учитываются только высота и поле элемента блока внутри, и у вас есть только один пустой элемент, поэтому высота равна 0.
При наличии an inline-block / inline элементы, вы вызовете создание IF C, и история будет другой:
При встроенном форматировании con text поля располагаются по горизонтали один за другим, начиная с верхней части содержащего блока. Между этими полями соблюдаются горизонтальные поля, границы и отступы. Блоки могут быть выровнены по вертикали по-разному: их нижняя или верхняя часть может быть выровнена, или базовые линии текста внутри них могут быть выровнены. Область прямоугольника angular, содержащая прямоугольники, которые образуют линию, называется линейным прямоугольником.
Высота линейного прямоугольника определяется правилами, приведенными в разделе при расчете высоты строки .
Как вы обнаружили, мы будем иметь дело со строками, и line-height будет учитываться здесь для определения высоты каждого линейного поля (в вашем случае у вас есть только один)
Теперь разница между inline и inline-block заключается в пустом пространстве. В случае элемента inline у вас закончится пустой контейнер, потому что все пустое пространство исчезнет. Подробнее здесь: https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#white -space-prop .
Если вы измените алгоритм пробела (и добавите пробел), вы получите ту же высоту, что и с inline-block элемент.
.container {
background-color: red;
margin:5px;
white-space:pre;
}
<div class="container"><div style="display: inline-block;"></div></div>
<div class="container"><div style="display: inline;"> </div></div>
Помимо пробелов, inline-block немного отличается, потому что:
Блоки строкового уровня, которые не являются строчными блоками (такие как замененные элементы встроенного уровня, элементы встроенного блока и элементы встроенной таблицы) называются atomi c блоками встроенного уровня , поскольку они участвуют в своем встроенном контексте форматирования как одиночный непрозрачный блок .
Это не тривиально для понимания, но, используя простые слова, вы можете увидеть элемент inline-block как элемент, в котором содержимое внутри не взаимодействует с внешним миром (с учетом пробелов, разрыва строки и т. д. c), и даже если inline-block пуст, у нас будет поле со строкой
Вот базовый пример c, чтобы увидеть разница:
.container {
margin: 5px;
font-size:30px;
}
div {
outline:1px solid green;
}
<div class="container">
a<div style="display: inline-block;"> some text here </div> text here
</div>
<div class="container">
a<div style="display: inline;"> some text here </div> text here
</div>
<div class="container">
a<div style="display: inline-block;"> some text<br> here </div> text here
</div>
<div class="container">
a<div style="display: inline;"> some text<br> here </div> text here
</div>
Последний случай - когда в вашем контейнере есть элементы inline / inline-block и , а также block. В этом случае мы запускаем BF C, но мы должны учитывать анонимные блоки блоков , где мы размещаем встроенные элементы.
если блок-контейнер (например, сгенерированный для DIV выше) имеет внутри него блок уровня блока (например, P выше), , тогда мы заставляем его иметь внутри только блоки уровня блока .
Затем вы можете увидеть блок анонимного блока как IF C и получить рекурсивное определение. BF C, где у вас есть разные блоки, и каждый из них может быть BF C или IF C и т. Д.
Связанный вопрос, связанный с высотой встроенного и блочного элемента: Как определить высоту блока содержимого и встроенного элемента