Mehrere Werte auf einmal

Jede Seite einzeln zu schreiben, ist viel Code. Deshalb können padding und margin bis zu vier Werte nehmen:

Ein Wert legt alle vier Seiten fest: padding: 10px.
Zwei Werte: Der erste gilt für oben und unten, der zweite für links und rechts: padding: 10px 20px.
Vier Werte gehen im Uhrzeigersinn von oben aus: oben, rechts, unten, links. Zum Beispiel legt margin: 0 0 10px 0 unten 10 Pixel Außenabstand fest und auf den anderen Seiten null. Wenn es dir hilft: Die Reihenfolge ist wie bei den Zeigern einer Uhr, die bei 12 Uhr beginnen.

(Du wirst auch drei Werte sehen: zuerst oben, dann links und rechts und dann unten.)

Bei Außenabständen gibt es noch etwas zu wissen. Wenn zwei Karten mit 20 Pixel Außenabstand übereinander stehen, könntest du einen Abstand von 40 Pixeln erwarten: 20 unter der ersten und 20 über der zweiten. Aber die vertikalen Außenabstände benachbarter Elemente überlappen sich: Der Abstand ist so groß wie der größere der beiden, hier 20 Pixel. Das nennt man Margin Collapsing („Zusammenfallen“ der Außenabstände).

Anweisungen

Ersetze in der Regel für .titel-hintergrund die beiden Deklarationen padding-top: 30px und padding-bottom: 30px durch eine einzige: padding: 30px 20px. Der Innenabstand bleibt oben und unten 30 Pixel und beträgt jetzt auch links und rechts 20 Pixel, damit die Überschrift auf einem schmalen Bildschirm die Ränder nicht berührt.
Ersetze in der Regel für .gruppe, #rassen margin-top: 20px durch margin: 20px 0. Die Karten haben jetzt auch unten einen Außenabstand, unter der letzten ist also Platz, aber der Abstand zwischen zwei Karten bleibt 20 Pixel.
Die Überschriften in den Karten haben viel Platz über sich: den Innenabstand der Karte plus den oberen Standard-Außenabstand der Überschrift. Füge in der Regel für h2 margin: 0 0 10px 0 hinzu. Das entfernt den oberen Außenabstand und lässt unter der Überschrift 10 Pixel Abstand.

ZurückWeiter

Mehrere Werte auf einmal

Jede Seite einzeln zu schreiben, ist viel Code. Deshalb können padding und margin bis zu vier Werte nehmen:

Ein Wert legt alle vier Seiten fest: padding: 10px.
Zwei Werte: Der erste gilt für oben und unten, der zweite für links und rechts: padding: 10px 20px.
Vier Werte gehen im Uhrzeigersinn von oben aus: oben, rechts, unten, links. Zum Beispiel legt margin: 0 0 10px 0 unten 10 Pixel Außenabstand fest und auf den anderen Seiten null. Wenn es dir hilft: Die Reihenfolge ist wie bei den Zeigern einer Uhr, die bei 12 Uhr beginnen.

(Du wirst auch drei Werte sehen: zuerst oben, dann links und rechts und dann unten.)

Anweisungen

Ersetze in der Regel für .titel-hintergrund die beiden Deklarationen padding-top: 30px und padding-bottom: 30px durch eine einzige: padding: 30px 20px. Der Innenabstand bleibt oben und unten 30 Pixel und beträgt jetzt auch links und rechts 20 Pixel, damit die Überschrift auf einem schmalen Bildschirm die Ränder nicht berührt.

Ersetze in der Regel für .gruppe, #rassen margin-top: 20px durch margin: 20px 0. Die Karten haben jetzt auch unten einen Außenabstand, unter der letzten ist also Platz, aber der Abstand zwischen zwei Karten bleibt 20 Pixel.

Die Überschriften in den Karten haben viel Platz über sich: den Innenabstand der Karte plus den oberen Standard-Außenabstand der Überschrift. Füge in der Regel für h2 margin: 0 0 10px 0 hinzu. Das entfernt den oberen Außenabstand und lässt unter der Überschrift 10 Pixel Abstand.