Skip to main content

Aufgabe 1: Margin und Padding

  1. Füge in der CSS-Datei eine neue Regel mit dem Selektor #überblick ein.
Warum #überblick und nicht .überblick?

Der Selektor #überblick ist ein Selektor für die id überblick. Der Selektor .überblick ist ein Selektor für die Klasse überblick. Wir wollen hier die id überblick selektieren, da wir die id überblick in der HTML-Datei verwenden.

Ids sind eindeutig und sollten nur einmal verwendet werden.

  1. Gebe dem überblick-Element ein Padding von 10%.
  2. Füge in der CSS-Datei eine neue Regel mit dem Selektor .überblick-links ein.
  3. Gebe dem überblick-links Element ein Padding nach oben von 10% (Hinweis: Padding nach oben kannst du mit dem Attribut padding-top konfigurieren).
  4. Füge in der CSS-Datei eine neue Regel mit dem Selektor .btn ein.
  5. Gebe dem Button ein Margin von 10% nach oben und unten.
Lösung

style.css​

/* Section 2: Überblick */

#überblick {
  padding: 10%;
}

.überblick-links {
  padding-top: 10%;
}

.btn {
  margin: 10% 0;
}
Warum die 0 nach margin: 10%?

Die 0 nach margin: 10% ist eine Kurzschreibweise für margin: 10% 0 10% 0;. Die 0 steht für margin-right und margin-left. Die 10% steht für margin-top und margin-bottom.