Padding

In einem früheren Kapitel haben wir über Margins gesprochen, d.h. die Menge an zusätzlichem Weißraum, die an den Seiten eines Elementes hinzugefügt werden kann. Innenabstände (Padding) ist ähnlich, wird aber auf die Innenseite des Elements angewandt. In anderen Worten: Padding ist ein innerer, unsichtbarer Rahmen um Ihr Element.

Standardmäßig haben die meisten Block-Level-Elemente kein Padding, was bedeutet, dass Text und andere Inhalte von Rand zu Rand des übergeordneten Elements reichen. In der Regel ist dies nicht gewünscht, insbesondere, wenn das übergeordnete Element einen Rahmen hat:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
}
</style>

<div class="box">
	Hello, world!
</div>

Wenn Sie das Beispiel ausprobieren, werden Sie feststellen, dass sich der Text sehr nahe an den Rändern des umgebenden Felds befindet. Dies ist normalerweise nicht das, was Sie möchten. Sie können dies natürlich beheben, indem Sie dem Textelement selbst einen Rand hinzufügen. In diesem Fall müssten Sie dies jedoch für alle Elemente im umgebenden Feld tun. Stattdessen können Sie einfach einen Innen-Abstand auf das Feld anwenden, wodurch alle untergeordneten Elemente von den Rändern entfernt werden. Dies geschieht mit einer oder mehreren der Padding-Eigenschaften, die als padding-top, padding-right, padding-bottom und padding-left bezeichnet werden:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
</style>

<div class="box">
	Hello, world!
</div>

Damit wird es nun eine angenehme Menge von Weißraum innerhalb der Box geben.

Verwenden der Eigenschaft padding shorthand

Ähnlich wie Margins auch, können Paddings ebenfalls mit einer Shorthand-Eigenschaft "padding" angewandt werden. Dadurch können Padding-Werte für alle vier Seiten definiert werden, ohne alle Eigenschaften wiederholen zu müssen. Die Padding-Eigenschaft leitet Ihre Werte einfach an die Eigenschaften padding-top, padding-right, padding-bottom und padding-left. An sich ist es also nur eine andere Möglichkeit, die CSS-Syntax zu verwenden, was Ihren Code jedoch in vielen Situationen einfacher und kürzer macht.

Die Padding-Eigenschaft kann 1-4 Werte annehmen. Dadurch können Paddings für alle 4 Seiten eines Elementes definiert werden. Falls alle 4 Werte gleich sind, können Sie es auf nur einen Wert reduzieren, welcher dann für alle Seiten angewandt wird. Falls Sie die gleichen Werte für Padding-Top und Padding-Bottom anwenden wollen, und einen anderen Wert, welcher sowohl für Padding-Left als auch Padding-Right angewandt werden soll, können Sie nur zwei Werte haben. Verwirrt? Hoffentlich nicht, aber hier ist ein Beispiel, in dem wir alle genannten Ansätze verwenden:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	margin: 10px;
}
</style>

<div class="box" style="padding: 10px 10px 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px;">
	Box
</div>

Beachten Sie, wie ich mit der ausführlichsten Methode beginne, bei der ich alle vier Werte deklariere und mich dann nach unten arbeite.

Aber in welcher Reihenfolge sollten sie sein? Und wie funktionieren die verschiedenen Versionen? Bei der Angabe von Paddings gelten folgende Regeln:

4 Werte:

1. [top padding]
2. [right padding]
3. [bottom padding]
4. [left padding]

3 Werte (nicht so häufig verwendet):

1. [top padding]
2. [left/right padding]
3. [bottom padding]

2 Werte:

1. [top/bottom padding]
2. [left/right padding]

1 Wert:

1. [top/right/bottom/left padding]

Relative Innenabstände

Oftmals wird Padding in absoluten Werten angegeben (normalerweise Pixel, wie im ersten Beispiel), aber wie bei den meisten größenbezogenen CSS-Eigenschaften, kann man auch relative Werte nutzen. Dies erfolgt entweder durch die Nutzung einer relativen Größeneinheit, beispielsweise der em-Einheit (1em entspricht der aktuellen Schriftgröße), oder auch durch definieren eines prozentualen Wertes.

Im nächsten Beispiel habe ich einen gemeinsamen Abstand von 1em angegeben und dann für jedes der drei Kästchen eine andere Schriftgröße, gemessen in ems, angewendet:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	padding: 1em;
	margin: 10px;
}
</style>

<div class="box" style="font-size: 1em;">
	Box
</div>

<div class="box" style="font-size: 2em;">
	Box
</div>

<div class="box" style="font-size: 3em;">
	Box
</div>

Wenn Sie nun versuchen, dieses Beispiel auszuführen, werden Sie feststellen, dass der Abstand jetzt relativ zur Schriftgröße ist, auch wenn die Felder denselben tatsächlichen Abstandswert haben. Dies bedeutet, dass er mit zunehmender Schriftgröße zunimmt. Dies ist in vielen Situationen nützlich!

Zusammenfassung

Padding bewirkt das gleiche zum Inneren des Elementes wie Margin nach außen: Es fügt Weißraum hinzu. Zwischen Margin und Padding ist der Rahmen (border) angeordnet, worüber wir im vorherigen Kapitel gesprochen haben. Während der Rahmen normalerweise sichtbar sein wird, werden es Margin und Padding nicht sein.

Wichtig ist, sich zu merken, dass Padding zu der Größe des Elementes hinzugefügt wird. Das macht keinen großen Unterschied, wenn das Element keine feste Größe hat. Sollte es aber eine feste Größe haben, z.B. 100x100, und Sie fügen ein Padding von 10 Pixeln an allen Seiten hinzu, wird das Element stattdessen 120x120 Pixel groß sein. In anderen Worten: Wenn Ihr Element eine spezifische Größe haben soll und und Sie Padding hinzufügen, müssen Sie das Padding bei der Definition von Höhe und Breite abziehen.