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.
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
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 | |
|
|||
| 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