padding CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die padding CSS Kurzschreibweise setzt den Auffüllbereich auf allen vier Seiten eines Elements gleichzeitig.
Probieren Sie es aus
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px;
padding: 10px 50px 30px 0;
padding: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
Der Auffüllbereich eines Elements ist der Raum zwischen seinem Inhalt und seinem Rand.
Hinweis:
Padding schafft zusätzlichen Raum innerhalb eines Elements. Im Gegensatz dazu schafft margin zusätzlichen Raum um ein Element herum.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Apply to all four sides */
padding: 1em;
/* top and bottom | left and right */
padding: 5% 10%;
/* top | left and right | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 2em;
/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
Die padding-Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden. Jeder Wert ist eine <length> oder ein <percentage>. Negative Werte sind ungültig.
- Wenn ein Wert angegeben wird, gilt das gleiche Padding für alle vier Seiten.
- Wenn zwei Werte angegeben werden, gilt das erste Padding für oben und unten, das zweite für links und rechts.
- Wenn drei Werte angegeben werden, gilt das erste Padding für oben, das zweite für rechts und links, das dritte für unten.
- Wenn vier Werte angegeben werden, gelten die Paddings in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).
Werte
<length>-
Die Größe des Paddings als fester Wert.
<percentage>-
Die Größe des Paddings als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) des umschließenden Blocks.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| Anwendbar auf | alle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | Längenangabe |
Formale Syntax
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Padding mit Pixeln einstellen
HTML
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
CSS
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
Ergebnis
Padding mit Pixeln und Prozenten einstellen
padding: 5%; /* All sides: 5% padding */
padding: 10px; /* All sides: 10px padding */
padding: 10px 20px; /* top and bottom: 10px padding */
/* left and right: 20px padding */
padding: 10px 3% 20px; /* top: 10px padding */
/* left and right: 3% padding */
/* bottom: 20px padding */
padding: 1em 3px 30px 5px; /* top: 1em padding */
/* right: 3px padding */
/* bottom: 30px padding */
/* left: 5px padding */
Spezifikationen
| Spezifikation |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |
Browser-Kompatibilität
Siehe auch
padding-top,padding-right,padding-bottom, undpadding-leftpadding-block-start,padding-block-end,padding-inline-start, undpadding-inline-endpadding-blockundpadding-inlineKurzschreibweisen- Einführung in das CSS-Boxmodell Leitfaden
- CSS-Boxmodell Modul