CSS Polsterung ist eine der Eigenschaften des CSS-Boxmodells. Diese Abkürzungseigenschaft legt die Auffüllung um alle vier Seiten eines HTML-Elements fest. Die CSS-Auffüllung kann auf fast alle HTML-Tags angewendet werden (mit Ausnahme einiger Tabellen-Tags). Außerdem können alle vier Seiten des Elements einen anderen Wert haben.
CSS-Padding-Eigenschaft
Um die Abkürzungseigenschaft der CSS-Auffüllung zu verwenden, können Sie die Mnemonik „TRouBLe“ (oder „TRiBbLe“ für Ihre Star Trek-Fans) verwenden. Das steht für oben, Recht, Unterseite, und links, und es bezieht sich auf die Reihenfolge der Auffüllbreiten, die Sie in der Abkürzungseigenschaft festlegen. Zum Beispiel:
Polsterung: oben rechts unten links; Auffüllen: 1px 2px 3px 6px;
Wenn Sie die oben aufgeführten Werte verwendet haben, wird auf jede Seite des HTML-Elements, auf das Sie es anwenden, ein anderer Füllwert angewendet. Wenn Sie die gleiche Auffüllung auf alle vier Seiten anwenden möchten, können Sie Ihr CSS vereinfachen und nur einen Wert schreiben:
Polsterung: 12px;
Mit dieser CSS-Zeile würden 12 Pixel für alle 4 Seiten des Elements aufgefüllt.
Wenn die Auffüllung für oben und unten sowie links und rechts gleich sein soll, können Sie zwei Werte schreiben:
Polsterung: 24px 48px;
Der erste Wert (24px) gilt für oben und unten, der zweite für links und rechts.
Wenn Sie drei Werte eingeben, wird die horizontale Auffüllung (links und rechts) gleich, während Sie oben und unten wechseln:
Polsterung: oben rechts und links unten; Auffüllen: 0px 1px 3px;
Laut dem CSS-Box-Modell ist das Auffüllen dem Element / Inhalt selbst am nächsten. Dies bedeutet, dass einem Element ein Abstand zwischen der Breite oder Höhe des Inhalts und den verwendeten Randwerten hinzugefügt wird. Wenn der Abstand auf Null gesetzt ist, hat er die gleiche Kante wie der Inhalt.
CSS-Auffüllwerte
Das CSS-Padding kann beliebige nicht negative Längenwerte annehmen. Stellen Sie sicher, dass Sie das Maß angeben, z. B. px oder em. Sie können auch einen Prozentsatz für die Auffüllung angeben, der einen Prozentsatz der Breite des Blockes des Elements darstellt. Dies gilt für die obere und untere Polsterung. Zum Beispiel:
#container {width: 800px; Höhe: 200px; } #container p {width: 400px; Höhe: 75%; Polsterung: 25% 0; }
Die Höhe des Absatzes im #Container Element wird 75% der sein #ContainerPlus 25% der Breite der oberen Polsterung und 25% der Breite der unteren Polsterung. Das sind 300 + 200 + 200 = 700px.
Auswirkungen beim Hinzufügen von CSS-Padding
Bei Elementen auf Blockebene wird die Auffüllung an den vier Seiten angewendet. Da das Element bereits ein Block oder eine Box ist, wird die Auffüllung auf die Boxseiten angewendet.
Wenn CSS-Auffüllung zu Inline-Elementen hinzugefügt wird, können sich Elemente oberhalb und unterhalb des Inline-Elements überschneiden, wenn die vertikale Auffüllung die Zeilenhöhe überschreitet. Die Zeilenhöhe wird jedoch nicht nach unten gedrückt. Horizontale CSS-Auffüllung, die auf Inline-Elemente angewendet wird, wird am Anfang des Elements und am Ende des Elements hinzugefügt. Und die Auffüllung kann Zeilen umbrechen. Es gilt jedoch nicht für alle Zeilen eines mehrzeiligen Elements. Daher können Sie nicht die Auffüllung verwenden, um ein Segment von mehrzeiligem Inline-Inhalt einzuziehen.
In CSS2.1 können Sie auch keine Containerblöcke erstellen, deren Breite von einem Element mit Prozentsätzen für Breiten (oder Auffüllbreiten) abhängt. Wenn Sie dies tun, ist das Ergebnis undefiniert. Browser zeigen den Inhalt weiterhin an, aber Sie erhalten möglicherweise nicht die erwarteten Ergebnisse. Wenn Sie darüber nachdenken, ist es sinnvoll, als müsste Ihr Containerelement die Breite seiner untergeordneten Elemente kennen, um seine Breite zu definieren - beispielsweise wenn es keine vordefinierte Breite hat und eines oder mehrere hat Wenn eine Breite als Prozentsatz des Containerelements festgelegt ist, wird eine kreisförmige Kette ohne Antwort eingerichtet. Wenn Sie Prozentwerte für die Breite von Elementen in Ihrem Dokument verwenden, sollten Sie sicherstellen, dass auch die Breite der übergeordneten Elemente definiert ist.
