Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

padding: der Innenabstand – für jede Seite einzeln definierbar

Bei der Gestaltung über CSS spielen Abstände zwischen einzelnen Elementen eine wichtige Rolle. Dabei gibt es:

  • den Innenabstand
  • und den Außenabstand

Schauen wir uns in diesem Kapitel den Innenabstand an. Im der folgenden Skizze des klassischen Box-Models sehen wir den Innenabstand zwischen dem Inhalt und dem Rahmen (border:).

Innenabstand padding im Box-Modell
Innenabstand padding im Box-Modell

Der Innenabstand ist immer vorhanden! Allerdings sehen wir diesen nicht, wenn dieser nicht definiert ist – dieser als seinen gewohnten Standardabstand hat.

Zum damit Spielen benötigen wir eine Hintergrundfarbe, die wir in CSS über background-color: festlegen (der Innenabstand würde auch über das sichtbar machen des Rahmens mit border funktionieren).

Um im Folgenden mit dem Innenabstand spielen zu können, benötigen wir einen Bereich, den wir im HTML über <div> festlegen.

<div id="bereich">
    Beispiel für CSS-Eigenschaften padding
</div>

Die Hintergrundfarbe über CSS festlegen:

#bereich {
    background-color: yellow;
}

Anhand der Hintergrundfarbe sieht man, dass der Textinhalt die komplette Breite einnimmt und als Höhe exakt den Raum, den er für die Ausgabe des Textinhalts benötigt.

Jetzt können wir den Innenabstand festlegen. Wir vergeben für das erste Beispiel einfach 2p Pixel:

#bereich {
    background-color: yellow;
    padding: 20px;
}

Maßeinheiten für den Innenabstand

Die Angaben können in Pixel wie auch in Prozent und relativen Maßen wie Beispielsweise em erfolgen.

  • padding: 20px;
  • padding: 5%;
  • padding: 1em;

Hier wird die Wahl der Maßeinheit sich nach dem Ziel richten, also was man als Design umsetzen möchte.

Die einzelnen Seiten des Innenabstands ansprechen

Wir haben in unserem Beispiel allen 4 Seiten über padding: 20px; den gleichen Innenabstand mitgegeben.

Über die folgenden Anweisungen kann jede Seite für sich angesprochen werden und somit jeder einen anderen Abstand zugewiesen werden:

#bereich {
    background-color: yellow;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Wer sich nun beim Umsetzen wundert, dass der rechte Innenabstand nicht sichtbar wird – dann fehlt genügend Textinhalt, der auch rechts anstößt. Einfach einmal probieren. Zur Not kann man das Browserfenster schmäler ziehen.

Diese Langschreibweise wird man seltener in der Praxis finden, da kürzer schöner, schneller und weniger Schreibfehleranfällig ist!

Verkürzte Schreibweisen für padding

Wir haben im ersten Beispiel bereits die Kurzschreibweise kennen gelernt.

Padding für alle 4 Seiten gleich

Geben wir nur padding und dann ein Wert an, bezieht sich das auf alle 4 Seiten:

#bereich {
    background-color: yellow;
    padding: 20px;
}

padding für 2 Seiten gleich – für oben und unten und für rechts und links

Geben wir padding mit 2 Werten an, bezieht sich die erste Wertangabe auf oben und unten und die zweite Wertangabe auf rechts und links:

#bereich {
    background-color: yellow;
    padding: 20px 50px;
}

Im Beispiel wird also der Innenabstand von 20 Pixel für oben und für unten gesetzt. Der Innenabstand rechts und links beträgt 50 Pixel (wobei das rechts oft nicht ersichtlich ist).

padding für 4 Seiten unterschiedlich

Sollen alle 4 Seiten unterschiedlich sein, gibt es auch hierfür die Kurzschreibweise und wir ersparen und die Angaben

#bereich {
    background-color: yellow;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;

    /* Kurzschreibweise */    
    padding: 10px 20px 30px 40px;
}

Es werden also 4 Angaben getrennt durch ein Leerzeichen angegeben. Wichtig ist, dass wir wie bei der Uhrzeit oben anfangen (erster Wert) und dann im Uhrzeigersinn vorgehen – auf der Uhrenziffernblatt wäre also 3 Uhr (rechts) der nächste Wert, dann 6 Uhr (unten) und als vierter Wert dann 9 Uhr (links).

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe