Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

7.6 Ein bisschen Abstand drum herum: padding

Ein Problem beim Gestalten mit CSS ist, dass man manchmal nicht genau weiß, welcher Box man welche Eigenschaft zuweisen muss, um einen gewünschten Effekt zu erreichen.

Um zwischen Text und dem Rand von div#wrapper ein kleines Polster zu erzeugen, läge es nahe, div#wrapper ein padding von zum Beispiel 20 Pixel zu geben.

Diese Maßnahme hat allerdings nicht wirklich den gewünschten Effekt, denn dadurch bekommt auch der Kopfbereich einen weißen Abstand drum herum:

Abbildung 7.6: #wrapper mit 20px padding – nicht wirklich gelungen
Abbildung 7.6: #wrapper mit 20px padding – nicht wirklich gelungen

Eine bessere Lösung ist in diesem Fall, für die div-Bereiche jeweils ein individuelles padding zu definieren.

ToDo: Einen Innenabstand für die div-Bereiche definieren
  1. Ergänzen Sie das Stylesheet um die hervorgehobenen Zeilen:

    div#kopfbereich {
      color: black;
      background-color: #f3c600;
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 0;
      padding-left: 20px;

    }
    div#navibereich {
      padding-top: 5px ;
      padding-right: 20px;
      padding-bottom: 5px;
      padding-left: 20px;
    }
    div#textbereich {
      padding-top: 20px ;
      padding-right: 10px;
      padding-bottom: 20px;
      padding-left: 20px;
    }

    div#fussbereich {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;

      border-top: 1px solid #8c8c8c;
      margin-top: 0;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Alle drei Bereiche haben ein leicht unterschiedliches padding bekommen, und insgesamt sieht das Ergebnis schon ganz brauchbar aus.

Abbildung 7.7: Startseite mit padding für die div-Bereiche
Abbildung 7.7: Startseite mit padding für die div-Bereiche
Kurzschreibweise für padding und margin

Bei der Definition des padding für die div-Bereiche haben Sie alle vier Seiten einzeln geschrieben. Das ist zwar sehr anschaulich, aber auf Dauer sehr viel Getippe. Im Kapitel über »Ordnung halten im CSS« lernen Sie diverse Kurzschreibweisen für padding und margin kennen.