CSS-Padding ist eine der Eigenschaften von CSS-Box-Modell. Diese Abkürzungseigenschaft legt den Abstand um alle vier Seiten eines HTML-Elements fest. CSS-Padding kann auf fast alle angewendet werden HTML-Tag (mit Ausnahme einiger Tabellen-Tags). Außerdem können alle vier Seiten des Elements einen anderen Wert haben.
CSS-Padding-Eigenschaft
Um die CSS-Padding-Eigenschaft in Kürze zu verwenden, können Sie den Merksatz „TrouBLe“ (oder „TRiBbLe“ für Ihre Star Trek-Fans) verwenden. Das steht für oben, Recht, Unterseite, und links, und bezieht sich auf die Reihenfolge der Auffüllbreiten, die Sie in der Kürzel-Eigenschaft festlegen. Beispielsweise:
Polsterung: oben rechts unten links;
Polsterung: 1px 2px 3px 6px;
Wenn Sie die oben aufgeführten Werte verwenden, wird auf jede Seite des HTML-Elements, auf das Sie ihn anwenden, ein anderer Padding-Wert angewendet. Wenn Sie auf allen vier Seiten die gleiche Polsterung auftragen möchten, können Sie Ihre CSS und schreibe einfach einen Wert:
Polsterung: 12px;
Mit dieser CSS-Zeile würden 12 Pixel Padding auf alle 4 Seiten des Elements angewendet.
Wenn die Auffüllung 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 schreiben, wird die horizontale Auffüllung (links und rechts) gleich, während oben und unten geändert werden:
Polsterung: oben rechts und links unten;
Füllung: 0px 1px 3px;
Gemäß dem CSS-Box-Modell ist Padding dem Element/Inhalt selbst am nächsten. Dies bedeutet, dass einem Element zwischen der Inhaltsbreite oder -höhe und allen von Ihnen verwendeten Rahmenwerten Auffüllung hinzugefügt wird. Wenn das Padding auf Null gesetzt ist, hat es die gleiche Kante wie der Inhalt.
CSS-Padding-Werte
CSS-Padding kann jeden nicht negativen Längenwert annehmen. Geben Sie unbedingt die Messung an, z. B. px oder em. Sie können auch einen Prozentsatz für Ihre Auffüllung angeben, der ein Prozentsatz der Breite des umschließenden Blocks des Elements ist. Dies beinhaltet die obere und untere Polsterung. Beispielsweise:
#container { Breite: 800px; Höhe: 200px; }
#container p { Breite: 400px; Höhe: 75%; Polsterung: 25% 0; }
Das Höhe des Absatzes innerhalb der #Container Element wird 75% der #Container's Höhe plus 25 % der Breite für die obere Polsterung und 25 % der Breite für die untere Polsterung. Dies ergibt 300 + 200 + 200 = 700 Pixel.
Auswirkungen des Hinzufügens von CSS-Padding
Auf Elemente auf Blockebene, die Polsterung ist an den vier Seiten angebracht. Da das Element bereits ein Block oder eine Box ist, wird die Polsterung auf die Seiten der Box angewendet.
Wenn CSS-Padding hinzugefügt wird zu Inline-Elemente, kann es zu Überlappungen von Elementen oberhalb und unterhalb des Inline-Elements kommen, wenn der vertikale Abstand die Zeilenhöhe überschreitet, aber die Zeilenhöhe wird dadurch nicht nach unten gedrückt. Horizontales CSS-Padding, das auf Inline-Elemente angewendet wird, wird am Anfang des Elements und am Ende des Elements hinzugefügt. Und die Polsterung kann Zeilen umbrechen. Sie gilt jedoch nicht für alle Zeilen eines mehrzeiligen Elements, sodass Sie mit Auffüllen kein Segment mit mehrzeiligem Inline-Inhalt einrücken können.
Außerdem können Sie in CSS2.1 keine Containerblöcke erstellen, bei denen die Breite von einem Element mit Prozentsätzen für Breiten (oder Padding-Breiten) abhängt. Wenn Sie dies tun, ist das Ergebnis undefiniert. Browser zeigen weiterhin den Inhalt an, aber Sie erhalten möglicherweise nicht die Ergebnisse, die Sie erwarten. Wenn Sie darüber nachdenken, macht es Sinn, als ob Ihr Containerelement die Breite seiner untergeordneten Elemente kennen muss, um seine Breite zu definieren — wie zum Beispiel Wenn es keine vordefinierte Breite hat und eine oder mehrere eine Breite als Prozentsatz des Containerelements haben, wird eine kreisförmige Kette mit no eingerichtet Antworten. Wenn Sie Prozentsätze für die Breite von irgendetwas in Ihrem Dokument verwenden, sollten Sie sicherstellen, dass auch die Breiten der übergeordneten Elemente definiert sind.