Wie funktioniert Padding tatsächlich für Inline-Elemente in CSS?

Auffüllung für Inline-Elemente: Eine Untersuchung

Das Konzept der Auffüllung für Inline-Elemente hat oft zu Verwirrung geführt, insbesondere hinsichtlich ihrer Interaktion mit dem Rand Eigenschaften. In diesem Artikel werden wir uns mit den Besonderheiten des Inline-Elementauffüllens befassen und auf häufige Missverständnisse eingehen.

Inline-Elementauffüllen: Ein Missverständnis

Während einige Quellen dies möglicherweise behaupten Obwohl Elemente vollständige Polsterungseigenschaften haben, ist dies nicht ganz korrekt. Während Inline-Elemente tatsächlich über Polsterung verfügen können, fehlt ihnen die Möglichkeit, vertikale Ränder (oben und unten) anzuwenden. In der CSS-Spezifikation heißt es ausdrücklich, dass diese Eigenschaften „keine Auswirkung“ auf nicht ersetzte Inline-Elemente haben.

Vererbung und die Nichtauswirkungen von Margin

Allerdings „nein „Effekt“ bedeutet nicht, dass die Eigenschaften nicht vorhanden sind. Sie werden einfach ignoriert, wenn sie direkt auf Inline-Elemente angewendet werden. Dennoch spielen sie bei der Vererbung eine Rolle. Wie im folgenden Beispiel gezeigt, können Ränder vererbt und auf Blockelemente angewendet werden, wenn sie als untergeordnete Elemente verwendet werden:

p { border: 1px solid red; }
i { vertical-align: top; }
span { margin-top: 20px; margin-bottom: 20px; }
b { display: inline-block; }
.two { margin: inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

Das Geheimnis des vertikalen Abstands

Ein weiteres häufiges Missverständnis besteht darin, dass Inline-Elemente keine vertikale Auffüllung akzeptieren können. Zwar scheinen padding-top und padding-bottom für Textinhalte unwirksam zu sein, sie wirken sich jedoch auf umgebende Elemente aus. In Ihrem Beispiel ist der Abstand um den „Hallo“-Text nicht sichtbar, da er den Text nach oben und unten verschiebt, aber der Text selbst bleibt innerhalb der ursprünglichen Zeile.

Das obige ist der detaillierte Inhalt vonWie funktioniert Padding tatsächlich für Inline-Elemente in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!