Отображение: блок внутри Отображение: встроенное

Хотя вопрос представляет сценарий элемента display:block внутри родительского элемента display:inline, фундаментальный вопрос заключается в различиях между этими двумя отображаемыми значениями в таком сценарии.

Согласно спецификации CSS 2.1, когда строчный элемент содержит блочный элемент, строковый блок разбивается вокруг блока. Анонимные блок-боксы создаются вокруг встроенного содержимого до и после блока, и блок становится родственным по отношению к этим анонимным блокам.

В результате получается структура, в которой родительский элемент, даже если он определен как display: встроенный, ведет себя по-другому из-за присутствия дочернего элемента display:block. Родительский элемент фактически становится блок-боксом, содержащим анонимные блок-боксы.

Различия между отображением: встроенным и отображением: родительским блоком

Несмотря на сходство в структуре, есть тонкие различия. различия между родительскими элементами display:inline и display:block в этом сценарии:

• Поток контента: Встроенные элементы располагаются горизонтально вместе с текстом, а блочные элементы располагаются вертикально. Анонимные блок-боксы, созданные вокруг встроенного родительского элемента, позволяют вертикально размещать дочерние элементы, имитируя поведение блока. встроенный контент, расположенный рядом с дочерним блоком. Это не относится к родительскому элементу display:block, где весь родительский элемент становится блоком.
• Обработка границ: Спецификация CSS 2.1 отмечает, что некоторые свойства, такие как граница, по-прежнему применяется к элементам, которые генерируют анонимные блок-боксы. Таким образом, у родительского элемента display:inline с рамкой граница будет нарисована вокруг анонимных блок-боксов, создавая открытую рамку на разрывах строк. Напротив, родительский элемент display:block с рамкой будет иметь закрытую рамку вокруг всего блока блока.
• Обтекание текстом: Встроенные элементы естественным образом оборачивают вокруг себя текст. В этом сценарии анонимные блоки блоков, окружающие встроенное содержимое, не позволяют тексту оборачиваться вокруг дочернего блока, как если бы родительский элемент был элементом display:block.