Die Eigenschaft padding erstellt einen Platz um den Element-Inhalt herum.
Die Werte von Padding werden mit Längen oder Prozentwerten eingestellt. Es kann keine negativen Werte akzeptieren. Sein Standardwert für alle Padding-Eigenschaften ist 0.
Hier sind die Eigenschaften von CSS-Padding:
Wir können die Eigenschaft padding für alle Seiten (oben, unten, links, rechts) verwenden. Für die Oberseite verwenden wir padding-top, für die Unterseite padding-bottom, für die linke Seite padding-left und für die rechte Seite padding-right.
Jetzt betrachten wir ein Beispiel.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px 20px 40px;
}
</style>
</head>
<body>
<p>Ein Absatz mit den Eigenschaften background-color, color und padding.</p>
</body>
</html>Jetzt erklären wir den Code: Wir verwenden die Eigenschaft background-color für den Hintergrund unseres Absatzes, die Eigenschaft color für die Farbe unseres Textes, und schließlich verwenden wir die Eigenschaft padding für den Raum um den Elementinhalt herum. In diesem Beispiel ist der Inhalt des Elements unser Text, den wir im Element p platziert haben.
Nun über padding: 20px 40px 20px 40px. Dieser Code bedeutet, dass die Polsterung auf der Oberseite 20px, auf der rechten Seite 40px, auf der Unterseite 20px und auf der linken Seite 40px betragen muss.
Wir verwenden diese Eigenschaft, wenn wir allen Seiten einen Wert geben. Es muss im Code so aussehen.
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Wenn alle Seiten die gleichen Werte haben (z. B. sind alle Seiten 50px), können wir es in css so schreiben.
p {
padding: 50px;
}Wenn wir die gleichen Werte für oben und unten (z. B. 20px) und die gleichen für links und rechts (z. B. 10px) haben, können wir den folgenden Code schreiben.
p {
padding: 20px 10px;
}Das ist mit dem Code oben identisch.
p {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}Wenn die Werte für links und rechts gleich sind, z. B. 15px, ist die Oberseite 20px und die Unterseite 35px, werden wir den folgenden Code schreiben.
p {
padding: 20px 15px 35px;
}Das ist mit dem obigen Code identisch.
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
