CSS-Padding-Eigenschafteneinstellung
Die Einstellung der CSS-Padding-Eigenschaften ist manchmal verwirrend, da 1 Wert, 2 Werte, 3 oder 4 Werte zusammen akzeptiert werden können.
Beispielsweise sind alle unten aufgeführten Padding-Eigenschaften gültig.
padding: 10px; padding: 10px 8px; padding: 10px 8px 10px; padding: 10px 8px 10px 9px;
CSS-Auffüllregel.
1) Die Reihenfolge der CSS-Auffüllung erfolgt wie folgt im Uhrzeigersinn
padding: top right bottom left
2) Die nicht deklarierten Werte werden von der Gegenseite genommen
CSS-Padding-Beispiel
1) Polsterung: 10 x 8 x 10 x 9 x;
Die 4 Werte sind leicht zu verstehen.
Das Ergebnis ist 10px oben, 8px rechts, 10px unten und 9px links
2) Polsterung: 10px 8px;
Die 2 Werte sind ebenfalls klar. Hier deklarieren wir 10px oben und 8px rechts. Befolgen Sie die Auffüllregel -The undeclared values are taken from the opposing side, der Wert „Oben“ wird „Unten“ und der Wert „Rechts“ wird auch „Links“ zugewiesen.
Das Ergebnis ist 10px oben, 8px rechts, 10px unten und 8px links
3) Polsterung: 10px 8px 10px;
Dies ist die verwirrendste Einstellung. Hier deklarieren wir 10px oben, 8px rechts und 10px unten. Befolgen Sie die Auffüllregel -The undeclared values are taken from the opposing side, der Wert "Rechts" wird "Links" zugewiesen.
Das Ergebnis ist 10px oben, 8px rechts, 10px unten und 8px links
4) Polsterung: 10px;
Diese Eigenschafteneinstellung ist etwas speziell. Die Einstellung gilt für alle oberen, rechten und unteren sowie linken Werte.
Das Ergebnis ist 10px oben, 10px rechts, 10px unten und 10px links
Fazit
Die alternative Methode für diese Einstellung der CSS-Auffüllungseigenschaft für eine Zeile besteht in der Verwendung von
1) Auffüllen oben:
2) Auffüllen rechts:
3) Auffüllen unten:
4) links auffüllen:
Zum Beispiel,
padding: 10px 8px 10px 9px;
ist äquivalent zu
padding-top:10px; padding-right:8px; padding-bottom:10px; padding-left:9px;
Ich bevorzuge mehrzeilige CSS-Padding-Eigenschaften wie Padding-Top oder Padding-Right. Der Code ist sauber und leicht zu pflegen. Warum wollen so viele Webentwickler die Sache kompliziert machen? Wird eine Linie Polsterung es professioneller machen?