Eigenschaften CSS Padding
Die CSS padding Eigenschaften werden verwendet , Raum um Inhalte zu generieren.
Die Polstereigenschaften, die Größe des weißen Raum zwischen dem Elementinhalt und dem Element Grenze.
Dieses Element hat eine Polsterung von 50px.
CSS Padding
Die CSS-Polstereigenschaften definieren den Leerraum zwischen dem Elementinhalt und dem Element Grenze.
Die Polsterung löscht einen Bereich um den Inhalt (innerhalb der Grenze) eines Elements.
 | Hinweis: Die Polsterung durch die Hintergrundfarbe des Elements beeinflusst wird! |
|---|
Mit CSS haben Sie die volle Kontrolle über die Polsterung. Es gibt CSS-Eigenschaften für für jede Seite eines Elements die Polsterung Einstellung (oben, rechts, unten und links).
Padding - Einzelseiten
CSS hat Eigenschaften für für jede Seite eines Elements die Polsterung festgelegt wird:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Alle Polstereigenschaften können die folgenden Werte haben:
- Länge - gibt eine Polsterung in px, pt, cm usw.
- % - Gibt eine Polsterung in% der Breite des enthaltenden Elements
- erben - gibt an, dass die Polsterung sollte aus dem übergeordneten Element vererbt werden
Das folgende Beispiel setzt unterschiedliche Polsterung für alle vier Seiten eines <p> Element:
Beispiel
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} Versuch es selber " Padding - Stenografie Eigentum
Um den Code zu verkürzen, ist es möglich, alle Polstereigenschaften in einer Eigenschaft angeben.
Die padding Eigenschaft ist eine zusammenfassende Eigenschaft für die folgenden einzelnen Polstereigenschaften:
-
padding-top -
padding-right -
padding-bottom -
padding-left
So, hier ist, wie es funktioniert:
Wenn die padding Eigenschaft hat vier Werte:
- padding: 25px 50px 75px 100px;
- Top-Polsterung ist 25px
- Recht Polsterung ist 50px
- Bodenpolster ist 75px
- linke Polsterung ist 100px
Wenn die padding Eigenschaft hat drei Werte:
- padding: 25px 50px 75px;
- Top-Polsterung ist 25px
- rechts und links Polsterungen sind 50px
- Bodenpolster ist 75px
Wenn die padding Eigenschaft hat zwei Werte:
- padding: 25px 50px;
- oben und unten Polsterungen sind 25px
- rechts und links Polsterungen sind 50px
Wenn die padding Eigenschaft hat einen Wert:
- padding: 25px;
- alle vier Polsterungen sind 25px
Mehr Beispiele
Alle Polstereigenschaften in einer Erklärung
Dieses Beispiel zeigt eine zusammenfassende Eigenschaft für alle die Polstereigenschaften in einer Erklärung setzen, können von einem bis vier Werte haben.
Stellen Sie die linke Polsterung
Dieses Beispiel zeigt , wie die linke Polsterung eines zu setzen <p> Element.
Stellen Sie die richtige Polsterung
Dieses Beispiel zeigt , wie Sie die richtige Polsterung eines zu setzen <p> Element.
Stellen Sie die Top-Polsterung
Dieses Beispiel zeigt , wie die obere Polsterung eines zu setzen <p> Element.
Stellen Sie die untere Polsterung
Dieses Beispiel zeigt , wie die untere Polsterung eines zu setzen <p> Element.
Testen Sie sich mit Übungen!
Alle CSS Padding Eigenschaften
| Eigentum | Beschreibung |
|---|---|
| padding | Eine zusammenfassende Eigenschaft für die Einstellung alle Polstereigenschaften in einer Erklärung |
| padding-bottom | Legt die untere Polsterung eines Elements |
| padding-left | Legt die linke Polsterung eines Elements |
| padding-right | Setzt die richtige Polsterung eines Elements |
| padding-top | Legt die obere Polsterung eines Elements |