Display: Block Inside Display: Inline

Während die Frage das Szenario eines display:block-Elements innerhalb eines display:inline-Elternteils darstellt, Die grundlegende Frage betrifft die Unterschiede zwischen diesen beiden Anzeigewerten in einem solchen Szenario.

Wenn ein Inline-Element ein Blockelement enthält, wird gemäß der CSS 2.1-Spezifikation die Inline-Box um den Block herum unterbrochen. Anonyme Blockboxen werden um den Inline-Inhalt vor und nach dem Block erstellt, und der Block wird zu einem Geschwister dieser anonymen Boxen.

Dies führt zu einer Struktur, in der das übergeordnete Element, auch wenn es als Anzeige definiert ist: inline, verhält sich aufgrund des Vorhandenseins des untergeordneten display:block-Elements anders. Das übergeordnete Element wird effektiv zu einer Blockbox, die anonyme Blockboxen enthält.

Unterschiede zwischen Display: Inline und Display: Block Parent

Trotz der Ähnlichkeit in der Struktur gibt es subtile Unterschiede Unterschiede zwischen den übergeordneten Elementen display:inline und display:block in diesem Szenario:

• Inhaltsfluss: Inline-Elemente fließen horizontal mit Text, während Blockelemente vertikal fließen. Die um das übergeordnete Inline-Element erstellten anonymen Blockboxen ermöglichen die vertikale Stapelung untergeordneter Elemente und simulieren so das Blockverhalten.
• Generierung anonymer Blockboxen: Display:inline bewirkt, dass anonyme Blockboxen für generiert werden Inline-Inhalt neben dem untergeordneten Block. Dies ist bei einem display:block-Elternelement nicht der Fall, bei dem das gesamte übergeordnete Element zu einem Blockfeld wird.
• Rahmenbehandlung: Die CSS 2.1-Spezifikation weist darauf hin, dass bestimmte Eigenschaften, wie z. B. Rahmen, gelten weiterhin für Elemente, die anonyme Blockboxen generieren. Daher wird bei einem display:inline-Parent mit einem Rahmen der Rahmen um die anonymen Blockfelder gezogen, wodurch an den Zeilenumbrüchen ein offener Rahmen entsteht. Im Gegensatz dazu hat ein übergeordnetes Display:Block-Element mit einem Rahmen einen geschlossenen Rahmen um die gesamte Blockbox.
• Textumbruch: Inline-Elemente wickeln Text auf natürliche Weise um sie herum. In diesem Szenario verhindern die anonymen Blockfelder, die den Inline-Inhalt umgeben, dass Text um das Block-Kindelement umgebrochen wird, als ob das Elternelement ein display:block-Element wäre.