Wie wirkt sich ein untergeordnetes „display: block'-Element auf das Layout eines „display: inline'-übergeordneten Elements in CSS aus?

Anzeige: Block innerhalb der Anzeige: Inline

Wenn in CSS ein Element mit display: block ein untergeordnetes Element eines Elements mit display ist: Inline wird ein Szenario erstellt, in dem das übergeordnete Element einige Merkmale eines Blockelements annimmt. Dies liegt daran, dass das Blockelement eine Unterbrechung im Inline-Fluss des übergeordneten Elements erzwingt. Es gibt jedoch wesentliche Unterschiede zwischen diesem Szenario und der Definition des übergeordneten Elements als display: block.

Unterschiede zu Display: Block

Gemäß der CSS 2.1-Spezifikation Folgendes Unterschiede bestehen, wenn ein display:inline-Elternteil ein display:block-Kind enthält:

1. Anonyme Blockboxen:

   • Das Inline-Elternteil ist in anonyme Blockkästen um das Blockkind herum aufgeteilt. Diese Felder umfassen alle anonymen oder nicht anonymen Inhalte vor und nach dem Kind.

2. Eigenschaftsvererbung:

   • Eigenschaften Wenn sie auf das Inline-Elternteil angewendet werden, wirken sie sich weiterhin auf die anonymen Blockboxen aus, die um das Kind herum generiert werden. Beispielsweise würde ein auf das übergeordnete Inline-Element angewendeter Rahmen den geteilten Textinhalt vor und nach dem untergeordneten Element umgeben.

3. Randverhalten:

   • Der Rand um den Inline-Absatz ist schmaler als der Rand um den Blockabsatz. Der Rand des Inline-Absatzes umgibt jede Textzeile, während sich der Rand des Blockabsatzes über die gesamte Breite der Seite erstreckt.

Betroffene Eigenschaften

In der CSS 2.1-Spezifikation wird ausdrücklich erwähnt, dass die Rahmeneigenschaften in diesem Szenario vom Unterschied zwischen display: inline und display: block betroffen sind. Es bleibt jedoch unklar, ob andere Eigenschaften ein anderes Verhalten aufweisen.

Das obige ist der detaillierte Inhalt vonWie wirkt sich ein untergeordnetes „display: block'-Element auf das Layout eines „display: inline'-übergeordneten Elements in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!