Fehlen Inline-Elementen wirklich die Eigenschaften „margin-top' und „margin-bottom'?

Abstand für Inline-Elemente

Bezüglich der Eigenschaften von Inline-Elementen stellt sich häufig die Frage zu Abstand und Rändern. Einigen Quellen zufolge haben Inline-Elemente vollständige Auffülleigenschaften, aber keine Margin-Top- und Margin-Bottom-Eigenschaften, sondern nur Margin-left und Margin-right.

Wo man offizielle randspezifische Aussagen findet

Erstens ist diese Behauptung keine endgültige Aussage, die in den W3-Standards zu finden ist. Das Box-Modell gibt jedoch an, dass „margin-top“ und „margin-bottom“ „keine Auswirkung auf nicht ersetzte Inline-Elemente haben“.

„Keine Auswirkung“ für Randeigenschaften verstehen

„Keine Auswirkung“ bedeutet in diesem Zusammenhang nicht das Fehlen von Eigenschaften. Stattdessen bedeutet dies, dass diese Eigenschaften keinen Einfluss auf die Position von Inline-Elementen haben. Sie existieren jedoch zu Vererbungszwecken.

Beispiel: Vererbung von Randeigenschaften

Beachten Sie den folgenden Code:

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>

In In diesem Beispiel werden die Ränder in der zweiten Zeile aufgrund der .two-Regel vom übergeordneten Bereich geerbt. Dieses Verhalten beim Erben von Randwerten von enthaltenden Elementen zeigt, dass die Eigenschaften „margin-top“ und „margin-bottom“ vorhanden sind, auch wenn sie sich nicht direkt auf die Positionierung von Inline-Elementen wie Text auswirken.

Padding-Eigenschaften für Inline Elemente

Während Inline-Elemente über vollständige Padding-Eigenschaften verfügen, wirken sich padding-top und padding-bottom möglicherweise nicht wie erwartet auf den umgebenden Text aus. Dies liegt daran, dass Inline-Elemente standardmäßig keine definierte Höhe haben. Daher ändert die Einstellung von padding-top oder padding-bottom möglicherweise nicht optisch die Größe oder Position des Elements relativ zum umgebenden Text.

Das obige ist der detaillierte Inhalt vonFehlen Inline-Elementen wirklich die Eigenschaften „margin-top' und „margin-bottom'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!