Innenabstand

Für den Innenabstand eines Elements steht uns die CSS-Eigenschaft padding zur Verfügung. Sie gibt an, wie weit der Rahmen des Elements vom Elementinhalt entfernt ist. Wie beim Rahmen lassen sich auch hier alle vier Seiten unabhängig von einander behandeln. Der Wert, den man dieser Eigenschaft gibt, muss wieder eine Längenangabe sein. Längenangaben müssen übrigens nicht absolut gemacht werden (wie z.B. bei 10px), sondern können auch relativ bezogen auf die Breite des Elements gesetzt werden, z.B. padding: 5%;.

Für die Befüllung eines Elements mit der Hintergrundfarbe ist standardmäßig der Innenabstand relevant: Die Hintergrundfarbe wird nicht nur im Inhaltsbereich angewendet, sondern auch für die Fläche des Innenabstands. Das sehen wir uns am besten mit einem Beispiel an. Ergänze die <div>-Box aus unserem HTML-Element folgendermaßen mit einem <span>-Element. Das <span>-Element hat ebenfalls keine inhaltliche Bedeutung und außerdem erzeugt es auch keinen Zeilenumbruch. Es verhält sich völlig neutral für den enthaltenen Text, ermöglicht es aber, ihn für eine bestimmte Formatierung auszuwählen.

<div id="box">
<span class="text-in-box">Ich bin eine Box!</span>
</div>

Dies formatieren wir mit dem folgenden Stylesheet:

#box {
	background-color: red;
	padding: 20px;
	border: 1px solid black;
}
.text-in-box {
	background-color: yellow;
}

Aufgaben

1. Gib den verschiedenen Seiten der Box verschiedene Innenabstände.
2. Experimentiere mit der relativen Angabe vom Innenabstand.