Eigenschaft padding

Die Eigenschaft padding legt den Innenabstand eines Elements fest. Als Wert für die Eigenschaft dienen beliebige Größeneinheiten. Standardmäßig kann jeder Browser verschiedene Abstände zu Elementen hinzufügen. Die Eigenschaft ist eine Kurzform für die Eigenschaften padding-top, padding-right, padding-bottom, padding-left.

Syntax

Selektor {
	padding: Wert;
}

Anzahl der Parameter

Die Eigenschaft padding akzeptiert 1, 2, 3 oder 4 Werte, durch Leerzeichen getrennt:

Anzahl	Beschreibung
`1`	Ein Wert legt den Abstand auf allen Seiten des Elements fest.
`2`	Der erste Wert legt den Abstand oben und unten fest, der zweite - rechts und links.
`3`	Der erste Wert legt den Abstand oben fest, der zweite - rechts und links, der dritte - unten.
`4`	Der erste Wert legt den Abstand oben fest, der zweite - rechts, der dritte - unten, der vierte - links.

Beispiel

In diesem Fall ist der Innenabstand standardmäßig null und der Text wird an den Blockrand gedrückt:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Beispiel

Setzen wir nun einen Innenabstand von 30px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Beispiel

Nun beträgt der Abstand oben und unten 20px, und rechts und links - 5px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Beispiel

Nun beträgt der Abstand oben 5px, rechts - 15px, unten - 25px, links - 35px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Siehe auch

die Eigenschaft margin,
die den Außenabstand festlegt