Padding - CSS und HTML Befehle leicht erklärt

Padding ist eine CSS Eigenschaft die Innenabstände zwischen Inhalt und Rändern festlegt. Wie funktioniert die Anweisung padding und wo wird es eingesetzt?

 

In unserem Artikel wollen wir anhand einfacher Beispiele den Einsatz und die korrekte Nutzung des CSS-Befehls erklären.

 

Das Wort padding kommt aus dem Englischen und bedeutet übersetzt Polsterung. Um die Anweisung benutzen zu können sollte das Boxmodell bekannt sein.

 

Anwendbar ist die Eigenschaft auf fast alle Elemente einschließlich dem Pseudoelement ::first-letter.

 

Nicht anwendbar bei einigen Tabellenelementen: table-column, table-column-group, table-header-group, table-row-group, table-footer-group.

Padding im Boxmodell

Im Boxmodell werden nach CSS-Regeln für jedes Element rechteckige Bereiche reserviert denen verschiedene Werte zuweisbar sind.

 

CSS Boxmodell
CSS-Boxmodell MySpartester 2016

Das Padding beschreibt den Innenabstand vom Inhalt bis zum Rahmen des Elements. Im obigen Bild sieht man wo der Innenabstand (natürlich auf allen vier Seiten) angeordnet ist.

 

Über die anderen Abstandselemente Margin und Border werden bald eigene Blog-Artikel bei uns erscheinen.

Paddingangaben

Die CSS-Eigenschaft padding wird sinnvoll eingesetzt wenn Werte für Border oder Grafiken im Hintergrund notiert werden. Erst im Zusammenspiel mit den anderen Eigenschaften wird der Innenabstand auch sichtbar.

Die Eigenschaft box-sizing muss den Wert content-box haben oder nicht gesetzt sein. Erlaubt sind alle positiven numerische Längenmaße sowie auto oder inherit.

  BELIEBTE ARTIKEL  


Werbung: TOP-Webhosting

Webhosting kostenlos testen!

Syntaxübersicht Padding

Befehl  Zuweisung  Notierung Innenabstand
padding 1 Angabe .bsp {padding: 10px;} oben 10px
  2 Angaben .bsp {padding: 10px 20px;} oben 10px, rechts 20px, unten 10px, links 20px
  3 Angaben .bsp {padding: 10px 20px 30px;} oben 10px, rechts 20px, unten 30px, links 20px
  4 Angaben .bsp {padding: 10px 20px 30px 40px;} oben 10px, rechts 20px, unten 30px, links 40px
 
  • Mit padding werden bis zu vier Werte zugewiesen. Diese gelten im Uhrzeigersinn für oben, rechts,unten und links.
  • Die einzelnen Werte werden durch Leerzeichen getrennt. Nicht durch Kommazeichen.
padding-top  Innenabstand oben .bsp {padding-top: 10px;}  nur oben 10px
padding-right  Innenabstand rechts .bsp {padding-right: 10px;}  nur rechts 10px
padding-bottom  Innenabstand unten .bsp {padding-bottom: 10px;}  nur unten 10px
padding-left  Innenabstand links .bsp {padding-left: 10px;}  nur links 10px

Beispiele für die Anwendung von padding

  • Im ersten Beispiel rechts wurde dem Textelement mit der Css-Eigenschaft border ein Rahmen zugewiesen man sieht das der Text direkt am Rahmen abschließt.

 

  • Das zweite Beispiel zeigt eine Box mit Textinhalt. Dem Element wurde ein Innenabstand (padding) von 15px mitgegeben. Das Ganze wirkt aufgelockerter da der Text nicht am Rahmen klebt.

 

  • Im dritten Beispiel sieht man wie durch padding das Aussehen der Tabelle aufgelockert wird. Der Innenabstand wird mit der angegebenen Hintergrundfarbe gefüllt.

Weitere Artikel über CSS und HTML

Beispiel 1: Textbox ohne padding

Ein Text mit 3px  Rahmen in der Farbe Blau, ohne padding. Die Abstände auf der rechten Seite ergeben sich durch den Zeilenumbruch.

<p style="border: 3px solid blue; text-align: left;">...Text...</p>

Beispiel 2: Textbox mit padding

Ein Text mit Rahmen und 15px padding. Der Abstand von Text zu Rahmen (border) entspricht rundum den padding-wert.

<p style="border: 3px solid blue; padding: 15px; text-align: left;">...Text...</p>

Beispiel 3: Tabelle mit padding

Spalte 1 Spalte 2

Die CSS Eigenschaft padding kann auch

in Tabellen benutzt werden.

 

Schreibe einen Kommentar

Kommentar schreiben

Kommentare: 0