CSS padding-Eigenschaft
Die padding-Eigenschaft wird verwendet, um Innenabstände auf allen Seiten des Inhalts eines Elements zu erzeugen.
Padding-Werte werden mit Längen oder Prozentangaben festgelegt.
INFO
Negative Werte sind nicht gültig.
Die CSS padding-Eigenschaft ist eine Kurzschreibweise für die folgenden Eigenschaften:
Die padding-Eigenschaft kann für alle Seiten (oben, unten, links, rechts) verwendet werden.
Die padding-Eigenschaft kann mit einem, zwei, drei oder vier Werten definiert werden:
- Wenn vier Werte angegeben werden, legt der erste Wert die obere Seite fest, der zweite die rechte Seite, der dritte die untere Seite und der vierte die linke Seite.
- Wenn drei Werte angegeben werden, legt der erste die obere Seite fest, der zweite die rechte und linke Seite und der dritte die untere Seite.
- Wenn zwei Werte angegeben werden, legt der erste die obere und untere Seite fest und der zweite die rechte und linke Seite.
- Wenn padding nur einen Wert hat, wird er auf alle vier Seiten angewendet
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente, außer wenn die display-Eigenschaft auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column gesetzt ist. Sie gilt auch für ::first-letter. |
| Vererbt | Nein. |
| Animierbar | Ja. Der Innenabstand ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.padding = "30px"; |
Syntax
Syntax der CSS padding-Eigenschaft
padding: length | initial | inherit;Beispiel für die padding-Eigenschaft:
Beispiel für die CSS padding-Eigenschaft mit vier Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Im gegebenen Beispiel bedeutet dieser Code, dass der Innenabstand auf der oberen Seite 15px, auf der rechten Seite 30px, auf der unteren Seite 20px und auf der linken Seite 40px betragen muss.
Beispiel für die padding-Eigenschaft mit dem "%" Wert:
Beispiel für die CSS padding-Eigenschaft mit % Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Im folgenden Beispiel werden zwei Werte angegeben. Der erste Wert legt die obere und untere Seite fest und der zweite Wert legt die rechte und linke Seite fest:
Beispiel für die padding-Eigenschaft mit zwei Werten:
Beispiel für die CSS padding-Eigenschaft mit zwei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Abspielen |
|---|---|---|
| length | Definiert einen Innenabstand in px, pt, cm usw. Der Standardwert ist 0. | Abspielen » |
| % | Legt den Innenabstand in % des Elternelements fest. | Abspielen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Abspielen » |
| inherit | Erbt die Eigenschaft von ihrem Elternelement. |
Praxis
Welche Funktionen hat padding in CSS?