Kastenmodell: CSS-Innenauslauf

Der innere Abstand der Elemente liegt zwischen Rahmen und Inhalt. Der einfachste Attribut zur Kontrolle dieses Bereichs ist die padding-Eigenschaft.

Die CSS padding-Eigenschaft definiert den Abstand zwischen dem Rahmen eines Elements und dem Inhalt des Elements.]}

CSS padding-Eigenschaft

Die CSS padding-Eigenschaft definiert den Innenabstand eines Elements. Die padding-Eigenschaft akzeptiert Längenwerte oder Prozentsatzwerte, aber nicht negative Werte.

Zum Beispiel: Wenn Sie möchten, dass alle h1-Elemente eine Innenabstand von 10 Pixeln an allen Seiten haben, müssen Sie dies so tun:

h1 {padding: 10px;}

Man kann auch in der Reihenfolge von oben, rechts, unten und links die Innenabstände der Seiten einzeln einstellen, wobei jede Seite unterschiedliche Einheiten oder Prozentsatzwerte verwenden kann:

h1 {padding: 10px 0.25em 2ex 20%;}

Einzelne Innenabstandseigenschaften

Man kann auch durch die Verwendung der folgenden vier einzeln definierten Eigenschaften die oberen, rechten, unteren und linken Innenabstände einstellen:

Wie Sie sich vielleicht vorstellen können, hat die nachstehende Regel die gleiche Wirkung wie die obige Kurzwortregel:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Prozentuale Innenabstandswerte

Wie bereits erwähnt, können für den Innenabstand eines Elements Prozentsatzwerte eingestellt werden. Diese Prozentsatzwerte werden relativ zur Breite des übergeordneten Elements berechnet, was wie bei den Außenabständen der Fall ist. Daher ändern sich diese auch, wenn sich die Breite des übergeordneten Elements ändert.

Nachstehende Regel setzt den Innenabstand des Absatzes auf 10% der Breite des übergeordneten Elements:

p {padding: 10%;}

Zum Beispiel: Wenn das übergeordnete Element eines Absatzes ein div-Element ist, dann wird der Innenabstand des Absatzes basierend auf der Breite des div berechnet.

<div style="width: 200px;">
<pDieser Absatz ist innerhalb eines DIV enthalten, das eine Breite von 200 Pixeln hat.</p>
</div>

Hinweis:Die oberen und unteren Innenabstände sind mit den linken und rechten Innenabständen identisch; d.h. die Prozentsätze der oberen und unteren Innenabstände werden relativ zur Breite des übergeordneten Elements eingestellt, nicht relativ zur Höhe.

CSS Innenabstand Beispiel:

Alle Innenabstandseigenschaften in einer Deklaration
Dieses Beispiel zeigt, wie man alle Innenabstandseigenschaften mit einem Kurzwort in einer Deklaration einstellt, was ein bis vier Werte haben kann.
Unteren Innenabstand auf 1 einstellen
Dieses Beispiel zeigt, wie man den unteren Innenabstand des Zellenbereichs mit einem Zentimeterwert einstellt.
Unteren Innenabstand auf 2 einstellen
Dieses Beispiel zeigt, wie man den unteren Innenabstand des Zellenbereichs mit einem Prozentsatzwert einstellt.
Linken Innenabstand auf 1 einstellen
Dieses Beispiel zeigt, wie man den linken Innenabstand des Zellenbereichs mit einem Zentimeterwert einstellt.
Linken Innenabstand auf 2 einstellen
Dieses Beispiel zeigt, wie man die linke Innenabstand des Zellenbereichs mit einem Prozentsatzwert einstellt.
Rechten Innenabstand einstellen 1
Dieses Beispiel zeigt, wie man den rechten Innenabstand der Zelle mit einem Zentimeterwert einstellt.
Rechten Innenabstand einstellen 2
Dieses Beispiel zeigt, wie man den rechten Innenabstand der Zelle mit einem Prozentsatzwert einstellt.
Oberen Innenabstand einstellen 1
Dieses Beispiel zeigt, wie man den oberen Innenabstand der Zelle mit einem Zentimeterwert einstellt.
Oberen Innenabstand einstellen 2
Dieses Beispiel zeigt, wie man den oberen Innenabstand der Zelle mit einem Prozentsatzwert einstellt.

CSS Innenabstandseigenschaft

Eigenschaft Beschreibung
padding Kurzschreibweise. Es dient dazu, die Innenabstandseigenschaften des Elements in einer Deklaration zu setzen.
padding-bottom Den unteren Innenabstand des Elements einstellen.
padding-left Den linken Innenabstand des Elements einstellen.
padding-right Den rechten Innenabstand des Elements einstellen.
padding-top Den oberen Innenabstand des Elements einstellen.