CSS -Padding
Padding wird verwendet, um Raum um den Inhalt eines Elements innerhalb definierter Grenzen zu schaffen.
CSS-Padding
Die CSS padding-Eigenschaften werden verwendet, um Raum um den Inhalt eines Elements innerhalb definierter Grenzen zu erzeugen.
Mit CSS haben Sie die volle Kontrolle über die Auffüllung. Es gibt Eigenschaften zum Einstellen der Polsterung für jede Seite eines Elements (oben, rechts, unten und links).
Polsterung - Einzelne Seiten
CSS hat Eigenschaften zum Festlegen der Polsterung für jede Seite eines Elements:
padding-toppadding-rightpadding-bottompadding-left
Alle Padding-Eigenschaften können die folgenden Werte haben:
- Länge - gibt eine Auffüllung in px, pt, cm usw. an.
- % - gibt eine Auffüllung in % der Breite des enthaltenden Elements an
- erben - gibt an, dass die Auffüllung vom übergeordneten Element geerbt werden soll
Hinweis: Negative Werte sind nicht zulässig.
Beispiel
Stellen Sie unterschiedliche Polsterung für alle vier Seiten eines <div>-Elements ein:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Kurzschrift-Eigenschaft
Um den Code zu verkürzen, ist es möglich, alle Padding-Eigenschaften in einer Eigenschaft anzugeben.
Die paddingEigenschaft ist eine Kurzformeigenschaft für die folgenden einzelnen Polsterungseigenschaften:
padding-toppadding-rightpadding-bottompadding-left
Also, hier ist, wie es funktioniert:
Wenn die paddingEigenschaft vier Werte hat:
- Polsterung: 25px 50px 75px 100px;
- Die obere Polsterung beträgt 25 Pixel
- Die rechte Polsterung beträgt 50 Pixel
- Die untere Polsterung beträgt 75 Pixel
- linke Polsterung ist 100px
Beispiel
Verwenden Sie die padding-Kurzschrifteigenschaft mit vier Werten:
div {
padding: 25px 50px 75px 100px;
}
Wenn die paddingEigenschaft drei Werte hat:
- Polsterung: 25px 50px 75px;
- Die obere Polsterung beträgt 25 Pixel
- Rechte und linke Polsterung sind 50px
- Die untere Polsterung beträgt 75 Pixel
Beispiel
Verwenden Sie die Kurzschrifteigenschaft padding mit drei Werten:
div {
padding: 25px 50px 75px;
}
Wenn die paddingEigenschaft zwei Werte hat:
- Polsterung: 25px 50px;
- obere und untere Polsterung sind 25px
- Rechte und linke Polsterung sind 50px
Beispiel
Verwenden Sie die Kurzschrifteigenschaft padding mit zwei Werten:
div {
padding: 25px 50px;
}
Wenn die paddingEigenschaft einen Wert hat:
- Polsterung: 25px;
- Alle vier Paddings sind 25 Pixel groß
Beispiel
Verwenden Sie die padding-Kurzschrifteigenschaft mit einem Wert:
div {
padding: 25px;
}
Polsterung und Elementbreite
Die CSS width-Eigenschaft gibt die Breite des Inhaltsbereichs des Elements an. Der Inhaltsbereich ist der Teil innerhalb der Polsterung, des Rahmens und des Rands eines Elements ( das Box-Modell ).
Wenn also ein Element eine bestimmte Breite hat, wird die diesem Element hinzugefügte Polsterung zur Gesamtbreite des Elements hinzugefügt. Dies ist oft ein unerwünschtes Ergebnis.
Beispiel
Hier erhält das <div>-Element eine Breite von 300px. Die tatsächliche Breite des <div>-Elements beträgt jedoch 350 Pixel (300 Pixel + 25 Pixel linke Füllung + 25 Pixel rechte Füllung):
div {
width: 300px;
padding: 25px;
}
Um die Breite unabhängig von der Füllmenge auf 300 Pixel zu halten, können Sie die
box-sizingEigenschaft verwenden. Dadurch behält das Element seine tatsächliche Breite bei; Wenn Sie die Polsterung erhöhen, verringert sich der verfügbare Platz für Inhalte.
Beispiel
Verwenden Sie die Box-Sizing-Eigenschaft, um die Breite unabhängig von der Füllmenge auf 300 Pixel zu halten:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Mehr Beispiele
Dieses Beispiel zeigt, wie der linke Abstand eines <p>-Elements festgelegt wird.
Dieses Beispiel zeigt, wie Sie den richtigen Abstand eines <p>-Elements festlegen.
Dieses Beispiel zeigt, wie der obere Abstand eines <p>-Elements festgelegt wird.
Dieses Beispiel zeigt, wie Sie den unteren Abstand eines <p>-Elements festlegen.
Alle CSS-Padding-Eigenschaften
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |