CSS Eigenschaften:
Außen- und Innenabstände

In CSS4You sind links im Menü die CSS-Eigenschaften beschrieben. Will man Informationen zu einer bestimmten Eigenschaft erhalten, klickt man unter Übersichten auf Eigenschaften A-Z. Dort befindet sich eine alphabetisch sortierte Liste der Eigenschaften.
Zum Erlernen ist es jedoch besser, Eigenschaften die zusammengehören, gleichzeitig zu erlernen. Dafür gibt es unter Eigenschaften eigene Gruppenbezeichnungen wie Schrift, Text usw.die aber mit den Kategorien in den Webeditoren nicht übereinstimmen.

zum Anfang der SeiteAußenabstände (margin) und Innenabstände (padding)

Box-Modell

CSS geht davon aus, dass jedes Element eine rechteckige Box erzeugt, die Elementboxen genannt werden. Diese Elementbox besteht aus dem Bereich des Inhalts (content), den Rahmen und den unten beschriebenen Außen- und Innenabständen.

Bevor man sich die CSS-Eigenschaften für die Abstände anschaut, sollte man das Box-Modell verstehen.

 

Außenabstände: margin
(Online-Link: CSS 4 You: Eigenschaften > Außenabstände)

Außenabstände bestimmen, wie der Abstand von einer Elementbox zu nächsten ist. Nebeneinander berühren sich die Elementboxen mit den Außenkanten ihrer Außenabstände, was dazu führt, dass sich die Außenabstände sozusagen addieren. Untereinander berührende Elementboxen verhalten sich anders: Es wird nur der größere Außenabstand genommen, der kleinere fällt unter den Tisch.
In der Praxis werden Außenabstände oben und Außenabstände unten (margin-top und margin-bottom) bei Absätzen (p) und Überschriften (h1 bis h6) verwendet, um den Abstand zwischen diesen zu bestimmen.

Beispiele

Ich bin eine Überschrift h4

Ich bin ein Absatz und mein Abstand zur Überschrift über mir ist 3 Zeilen groß, da bei der Überschrift folgende CSS-Regel definiert wurde: h4 { margin-bottom: 3em; }.

Ich bin ein Absatz und folgende CSS-Regel wurde für mich definiert: p { margin-top: 3em; margin-bottom: 1em; }.

Ich bin der nächste Absatz und bin genauso formatiert. Aber der Abstand zwischen uns ist nicht 4em, sondern nur 3em. Der kleinere Abstand 1em fällt unter den Tisch.

  • Ich bin eine Liste und habe den Abstand von 1em, da der obere Absatz mit margin-bottom: 1em formatiert ist.

Ich habe keinen Außenabstand.

Ich habe links und rechts einen Außenabstand von 30 Pixel.

Ich habe zum Vergleich links und rechts einen Innenabstand von 30 Pixel.

Außenabstände können als einzige auch negativer Werte annehmen. Damit kann man Element-boxen in einander verschieben. aber auch aus einer Umgebung herausragen lassen:

Die darunterliegenden Absätze haben jeweils oben und unten (margin-top, margin-bottom) einen Wert von -1em. Dadurch rücken sie um die Höhe einer Zeile zusammen und überschneiden sich dadurch

Ich bin ein Absatz, der nicht gerne alleine ist.

Ich bin ein Absatz, der nicht gerne alleine ist.

Ich bin ein Absatz mit der CSS-Regel p { margin-left: -50px; }. Dadurch liegt mein linker Rand um 50 Pixel nach links verschoben außerhalb des Kasten, in dem ich eigentlich stehe.

 

Innenabstände: padding
(Online-Link: CSS 4 You: Eigenschaften > Innenabstände)

Innenabstände bestimmen, wie der Abstand zwischen eines Rahmens und des Inhaltes (content-box) ist.

Beispiele

Ich habe keine Innenabstände.

Ich habe Innenabstände von 10 Pixel oben und unten und 30 Pixel links und rechts.

Beispiel

Ich bin eine Überschrift.

Ich bin ein ganz normaler Absatz ohne irgendwelche CSS-Regeln. Aber die Überschirft über mir hat folgende CSS-Regel: h3 {padding-bottom: 8px; border-bottom: 2px solid #990000; margin-bottom: 20px; color: #660000; }
padding-bottom: 8px; bestimmt, dass zwischen Text und Rahmen (unterhalb) ein Abstand von 8 Pixel ist.
border-bottom: 2px solid #990000; bestimmt, dass unterhalb des Textes eine Linie, 2 Pixel breit, durchgezogen in einem mittleren Rot gezeichnet wird.
margin-bottom: 20px; bestimmt, dass unterhalb der Linie nochmals 20 Pixel Abstand zum folgenden Text vorhanden ist (falls der untere Text einen oberen Außenabstand (margin-top) hat der größer ist, dann wird dieser verwendet).
color: #660000; bestimmt nur, dass die Textfarbe eine helleres Rot ist.

 

Formatierung für jede Seite individuell

Weiters kann man für jede der vier Seiten die Einstellungen seperat angeben.

Beispiele

Dieser Absatz hat eine Hintergrundfarbe. Damit der Text nicht zu knapp an die Außenkante reicht, wurde ein Innenabstand padding für jede Seite individuell deklariert:
p {padding: 0.5em 2em 1em 1.5em;}

Dies ist ein normaler Absatz ohne Formatierungen.

Dieser Absatz hat links einen blauen (#669966) Rahmen, der acht Pixel breit und durchgezogen (solid) ist. Zusätzlich ist links noch ein Innenabstand padding zwischen Rahmen und Text von vier Pixel.
Damit der Text mit den vorherigen und nachfolgenden Texten auf einer Linie beginnt wurde mit Hilfe eines negativen, linken Außenabstandes margin rausgeschoben - und zwar um 12Pixel, nämlich die Summe von der Breite des Rahmens und des Innenabstands: 8+4=12)
p {
    border-left: 8px solid #000099;
    padding-left: 4px;
    margin-left: -12px;
}

Dies ist ein normaler Absatz ohne Formatierungen.

 

Kurzformen der Deklaration von Innenabstand padding und Außenabstand margin

Kurzformen der Deklaration

Änderungen des Dokuments

12.11.2018
Änderung der Beispiele im Kapitel "Formatierung für jede Seite individuell"