CSS-Innenabstand (Padding)

CSS Tutorial > Innenabstand

Wie wir bereits beim Box-Modell sehen konnten, ist der Innenabstand der Bereich gerade außerhalb des Inhaltsbereichs und auf der inneren Seite des Rahmenbereichs. Eine Box hat vier Seiten. Wir können also Innenabstände für die 4 Seiten, und auch eine allgemeine Innenabstandeigenschaft definieren.

padding-top

padding-right

padding-bottom

padding-left

Es gibt eine fünfte Eigenschaft, padding, die als Kurzbezeichnung für die oben genannten Eigenschaften benutzt werden kann.

Innenabstände können über 3 Wege festgelegt werden: Länge, Prozentangabe, oder automatisch. Schauen wir uns ein Beispiel an:

#container {
padding-top:15px;
padding-left:5px;
padding-right:30px;
padding-bottom:40px;
border: 1px solid 000000;
}

Der folgende HTML-Code:

<div id="container">
Dies ist ein Beispiel für Innenabstände
</div>

würde so aussehen:

Dies ist ein Beispiel für Innenabstände

Beachten Sie, dass der Innenabstand zwischen der Box und der oberen, linken, unteren und rechten Seite des hellgrünen Bereiches 15px, 5px, 40px und 30px ist.

Kurzbezeichnungen für Innenabstände

Alle vier Außenabstände können mit der "padding"-Eigenschaft über eine einzelne Zeile bestimmt werden. Der Syntax hierfür ist wiefolgt:

padding: [padding-top] [padding-right] [padding-bottom] [padding-left]

Die Reihenfolge ist hier sehr wichtig. Das erste Element ist immer der obere Innenabstand, das zweite der rechte Innenabstand, das dritte der untere Innenabstand und das vierte ist der linke Innenabstand.

Folgende Seite: CSS Background