padding-right
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die padding-right
-Eigenschaft (CSS) legt die Breite des Abstandsbereichs auf der rechten Seite eines Elements fest.
Probieren Sie es aus
Der Abstand eines Elements bezeichnet den Bereich zwischen seinem Inhalt und seinem Rahmen.
Hinweis:
Die Eigenschaft padding
kann verwendet werden, um die Abstände auf allen vier Seiten eines Elements in einer einzigen Deklaration festzulegen.
Syntax
/* <length> values */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;
/* <percentage> value */
padding-right: 10%;
/* Global values */
padding-right: inherit;
padding-right: initial;
padding-right: revert;
padding-right: revert-layer;
padding-right: unset;
Die Eigenschaft padding-right
wird als ein einzelner Wert angegeben, der aus der untenstehenden Liste ausgewählt wird. Im Gegensatz zu Margen sind negative Werte für padding
nicht zulässig.
Werte
<length>
-
Die Größe des Abstands als fester Wert. Muss nicht negativ sein.
<percentage>
-
Die Größe des Abstands als Prozentsatz, relativ zur Inline-Größe (width in einer horizontalen Sprache, definiert durch
writing-mode
) des umschließenden Blocks. Muss nicht negativ sein.
Formale Definition
Anfangswert | 0 |
---|---|
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 | der Prozentwert wie angegeben oder die absolute Länge |
Animationstyp | Längenangabe |
Formaler Syntax
padding-right =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Rechtspadding mit Pixeln und Prozentsätzen setzen
.content {
padding-right: 5%;
}
.side-box {
padding-right: 10px;
}
Spezifikationen
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-right |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
padding-top
,padding-bottom
, undpadding-left
padding
Kurzschreibweisepadding-block-start
,padding-block-end
,padding-inline-start
, undpadding-inline-end
padding-block
undpadding-inline
Kurzschreibweisen- Einführung in das CSS-Grundlagen-Box-Modell
- CSS-Box-Modell Modul