In diesem Tutorial lernen Sie, wie Sie den Padding-Bereich eines Elements mit CSS anpassen.
Mit CSS Padding können Sie den Innenabstand zwischen dem Inhalt eines Elements und seinem Rahmen definieren. Der Padding-Bereich um den Inhalt herum ist transparent.
Wenn Sie also zum Beispiel einem <div>
-Element einen Padding-Wert von 10px und einen roten Hintergrund geben:
div {
padding: 10px;
background-color: red;
}
So wird, der Padding-Bereich ebenfalls rot erscheinen.
Sie können den Padding-Wert für jede Seite eines Elements definieren. Dazu gibt es die Eigenschaften: padding-top
, padding-right
, padding-bottom
, padding-left
Man kann also folgende Definition setzen:
div {
padding-left: 10px;
padding-right: 12px;
}
Padding kann mit den folgenden Werten angegeben werden:
Die padding
-Eigenschaft besitzt eine Kurzform. Diese wird genutzt um zu vermeiden, dass das Padding jeder Seite separat festgelegt werden muss (dh. padding-top
, padding-right
, padding-bottom
und padding-left
).
Schauen wir uns die folgenden Beispiele an, um zu verstehen, wie die Kurzform angewendet werden kann
div {
padding: 50px;
/* Anwendung für alle 4 Seiten */
}
h1 {
padding: 25px 75px;
/* 25px oben und unten | 75px links und rechts */
}
h2 {
padding: 25px 50px 75px;
/* oben | horizontal | unten */
}
h3 {
padding: 25px 50px 75px 100px;
/* Uhrzeigersinn: top | right | bottom | left */
}
Diese Kurzschreibweise kann einen, zwei, drei oder vier durch Leerzeichen getrennte Werte annehmen.
Es wird empfohlen, die Kurzschreibweise zu verwenden. Dies hilft Ihnen, Zeit zu sparen, da Sie zusätzliche Eingaben vermeiden und der CSS-Code einfacher zu lesen ist.
Beim Erstellen von Webseiten-Layouts führt das Hinzufügen von Padding oder Border-Werten manchmal zu unerwarteten Ergebnissen. Dies liegt daran, dass Padding und Border zur Breite und Höhe der vom Element erzeugten Box addiert werden (wie wir im Kapitel CSS-Boxmodell gelernt haben).
Wenn wir beispielsweise die Breite eines <div>
-Elements auf 100% Bildschirmbreite setzen und dazu ein Padding von 50px setzen, wird eine horizontale Scrolleiste angezeigt, da der <div>
-Container plötzlich eine Breite von 100% Bildschirmbreite + 100px Padding hat.
div {
width: 100%;
padding: 25px;
}
Um zu verhindern, dass Padding oder Border die Abmessungen eines Elements ändern, können Sie die Eigenschaft box-sizing: border-box;
verwenden. In den nächsten Kapiteln werden wir auf diese Eigenschaft aber noch einmal genauer eingehen.