1. Startseite
2. CSS
3. Abstände

Abstände

Abstände können genau wie der "border" in alle Richtungen definiert werden, die im Boxmodell möglich sind.

Falls bei einem Element noch kein Abstand definiert wurde, dann wird der Abstand vergeben der im "Browser-Stylesheet" vordefiniert ist. Der Abstand zwischen Rahmen ("border") und dem Inhalt ("Content") wird "padding" genannt. Der Abstand zwischen Rahmen ("border") und dem nächsten Element bzw. dem Bildschirmrand wird "margin" genannt.

Padding / Innenabstand

Der Innenabstand ("padding") kann in alle Richtungen unabhängig definiert werden.

Zur besseren Darstellung werden wir die Listenelemente von der geordneten Liste nebeneinanderstellen und einen kleinen Rahmen geben.

ol li {
 display: inline;
 border: 1px solid black;
}

Im Boxmodell ist zu erkennen, dass der Rahmen ("border") an jeder Seite 1px stark ist.

Um den Innenabstand ("padding") zu definieren, schreiben wir zusätzlich in den Deklarationsblock die Werte für alle Innenabstände.

ol li {
 display: inline;
 border: 1px solid black;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
}

Im Boxmodell ist gut zu erkennen, dass der Abstand zwischen dem "Content" und dem "border" auf jeder definierten Seite 10px beträgt.

Wenn alle Seiten den gleichen Abstand erhalten sollen, dann genügt auch die einfache Anweisung:

ol li {
 padding: 10px;
}

Alle 4 Seiten bekommen dadurch den gleichen Wert zugewiesen.

Damit es bei einer widersprüchlichen Vergabe von Anweisungen zu keinen Fehler kommt, verwendet CSS immer die zuletzt gültige Deklaration. Genau diese Eigenschaft können wir uns zunutze machen und im Nachhinein den Wert für "padding-bottom" verändern.

ol li {
 display: inline;
 border: 1px solid black;
 padding: 10px;
 padding-bottom: 5px;
}

Alle Seiten haben einen Abstand von 10px erhalten. Direkt als Nächstes wurde der Wert für die Unterseite auf 5px korrigiert, ohne das es zu einen Fehler kommt.

Eine andere gültige Schreibweise für das gleiche Ergebnis wäre:

ol li {
 display: inline;
 border: 1px solid black;
 padding: 10px 10px 5px 10px;
}

Bei dieser Schreibweise ist darauf zu achten, dass die Aufzählung im Uhrzeigersinn erfolgt, der erste Aufzählungswert steht für top, darauf folgt right, darauf folgt bottom und zuletzt wird left definiert.

Wenn in CSS nur 3 Werte angegeben werden, dann interpretiert der Browser den ersten Wert für "top", den zweiten Wert für beide Seiten und den dritten Wert für "bottom".

ol li {
 display: inline;
 border: 1px solid black;
 padding: 10px 5px 8px;
}

Wenn nur 2 Werte vergeben werden, interpretiert der Browser den ersten Wert für "top" und "bottom". Der zweite Wert wird demnach für beide Seiten verwendet.

ol li {
 display: inline;
 border: 1px solid black;
 padding: 10px 15px;
}

Wenn eine oder mehrere Seiten keinen Abstand bekommen sollen, dann kann auch einfach die 0 ohne Einheit angegeben werden.

ol li {
 display: inline;
 border: 1px solid black;
 padding: 0 15px;
}

Margin / Außenabstand

Die Vergabe der Außenabstände verläuft wie bei den Innenabständen.

Die Werte können entweder ausgeschrieben oder unter Berücksichtigung der Interpretation des Browsers auch in Kurzschreibweise angegeben werden.

ol li {
 display: inline;
 border: 1px solid black;
 padding: 0 15px;
 margin: 0 10px 5px 15px;
}

Besonderheit Tabellen

Bei Tabellen gibt es noch ein paar Besonderheiten, die zu beachten sind.

Im Boxmodell des Browsers ist zu erkennen, dass die <td> und <th>-Elemente keinen "margin" haben.

Das Element <tr> besitzt weder "margin" noch "padding".

Das Element <tbody> hat auch weder "margin" noch "padding".

Nur das Element <table> hat alle Bestandteile des Boxmodells.

Einen "border" um die Tabelle zu zeichnen, sollte kein Problem darstellen.

table {
 border: 1px solid black;
}

Die Zellen der Tabelle sollen den gleichen "border" erhalten, wie auch die Tabelle ihn hat. Dazu müssen wir nur den Selektor anpassen.

table, td {
 border: 1px solid black;
}

Direkt hinter dem "Selektor" "table" setzen wir ein Komma und ein Leerzeichen für eine Aufzählung. Danach benennen wir direkt den nächsten "Selektor". Somit können wir für die "Selektoren" "table" und "td" die gleichen "Deklarationen" verwenden, ohne den "Deklarationsblock" erneut zu schreiben.

Die Abstände zum Außenrand und auch zwischen den Zellen werden noch vom "Browser-Stylesheet" bestimmt.

Um einen Abstand zwischen den Zellen und dem Außenrand zu bekommen, können wir dem Selektor "table" einfach einen "padding" zuweisen.

table {
 padding: 10px;
}

Dadurch bleib die Lücke zwischen den Zellen jedoch unberührt. Weil <tr> und <td>-Elemente keinen "margin" haben, greifen wir auf eine andere Eigenschaft zu. Wir entfernen die Eigenschaft "padding" und verwenden stattdessen die Eigenschaft "border-spacing".

table {
 border-spacing: 10px;
}

Dadurch erhalten wir einen Abstand zwischen allen Rahmenlinien der Tabelle.

Den Abstand zwischen "Content" und "border" bei den <td>-Elementen können wir wie üblich über das "padding" definieren.

td {
 padding: 5px;
}