CSS: Innenabstände (Paddings) – Befehle im Überblick

Innenabstände (Paddings) sorgen – wie der Name schon sagt – für die nötigen Abstände zwischen dem Inhalt der „Box“ und dem Rahmen / Ende der Box. Diese sollten nicht verwechselt werden mit den Außenabständen (Margins).

Haben wir beispielsweise eine Box mit blauem Hintergrund und wollen darauf weißen Text setzen, so sollten wir mit dem CSS Befehl einen definierten Innenabstand angeben. Dadurch erscheint der Text nicht direkt am „Rand der Box“. Mit einer „Padding“ Anweisung von 20 Pixeln erzeugen wir beispielsweise einen in vielen Fällen gut zu erkennenden Innenabstand zwischen Text und Rahmen. Das Erscheinungsbild des Textes wird über CSS für Schriften definiert. Um die CSS Datei klein zu halten, verwenden wir hier im Idealfall die Mischschreibweise (siehe unten).

BefehlBedeutungMögliche Werte

padding-top

Innenabstand oben

Integer Wert in Pixel (px), mm, cm oder em

padding-right

Innenabstand rechts

Integer Wert in Pixel (px), mm, cm oder em

padding-bottom

Innenabstand unten

Integer Wert in Pixel (px), mm, cm oder em

padding-left

Innenabstand links

Integer Wert in Pixel (px), mm, cm oder em

padding

Innenabstand kombiniert

Integer Wert in Pixel (px), mm, cm oder em

padding: 10px;alle Seiten 10pxpadding: 10px 20px;oben/unten 10px, rechts/links 20pxpadding: 10px 20px 30px 40px;oben 10px, rechts 20px, unten 30px, links 40px

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    padding:20px;
    padding-top:50px;
    padding-bottom:100px;
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
1 Bewertungen
20 %
1
5
1
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.