6.4.6 Innenabstand (padding)

Mit der Deklaration eines Innenabstandes padding erzwingen Sie einen Abstand zwischen dem aktuellen Element und dessen Inhalt. Zur Veranschaulichung dient folgendes Beispiel:

Beispiel für einen Innenabstand von 50px

Formatierung des div-Tags

1
2
3
4
5
6
7
div {
    border: 2px double #000000;
    background-color: #c0c0c0;
    text-align: justify;
    width: 600px;
    padding: 50px;
}

Abstand von oben zum Inhalt (padding-top)

Diese Eigenschaft bestimmt den Abstand der oberen Elementgrenze zum Inhaltsanfang. Wie bei dem Außenabstand sind nur numerische Werte erlaubt.

padding-top: 150px;

Abstand von rechts zum Inhalt (padding-right)

padding-right bestimmt den Abstand zwischen Elementinhalt und rechter Elementgrenze. Auch hier sind nur numerische Angaben als Wert erlaubt.

padding-right: 20px;

Abstand von unten zum Inhalt (padding-bottom)

padding-bottom gibt den Abstand an, den der Elementinhalt zum unteren Elementrand hat. Auch hier dürfen Sie nur numerische Werte einsetzen.

padding-bottom: 30px;

Die Eigenschaft padding-left bestimmt den Abstand zwischen der linken Elementgrenze und dem Inhalt. Auch hier sind ebenfalls nur die numerischen Werte einsetzbar.

padding-left: 15px;

Innenabstände als Sammeleigenschaft

Gleich wie den Außenabstand können Sie auch den Innenabstand als Sammeleigenschaft schreiben.

Innenabstand als Sammeleigenschaft