W3docs
de
Anmelden

CSS padding-right Eigenschaft

Wie man die CSS-Eigenschaft padding-right nutzt, um den Innenabstand rechts eines Elements festzulegen. Werte und Beispiele.

Die CSS-Eigenschaft padding-right legt die Breite des Innenabstands auf der rechten Seite eines Elements fest. Padding ist der transparente Bereich zwischen dem Inhalt eines Elements und seinem Rahmen. Wird padding-right vergrößert, rückt der rechte Rahmen weiter vom Inhalt weg (der Inhalt selbst bleibt an seiner Position; das Element wird breiter, es sei denn, box-sizing ist auf border-box gesetzt).

Diese Seite behandelt die zulässigen Werte (Längenangaben, Prozentwerte und die CSS-weiten Schlüsselwörter), wie prozentuale Padding-Werte berechnet werden, und ausführbare Beispiele für jeden Fall. Um nur den rechten Innenabstand festzulegen, verwenden Sie padding-right; um alle vier Seiten gleichzeitig zu setzen, nutzen Sie die padding-Kurzschreibweise.

Info

Negative Werte sind nicht gültig.

Info

Diese Eigenschaft hat keinen Effekt auf Inline-Elemente wie <span>.

Anfangswert0
Gilt fürAlle Elemente. Eine Ausnahme besteht, wenn die Eigenschaft display auf table-row-group, table-header-group, table-footer-group, table-row, table-column-group oder table-column gesetzt ist. Gilt auch für ::first-letter.
VererbbarNein.
AnimierbarJa. Der Innenabstand ist animierbar.
VersionCSS1
DOM-Syntaxobject.style.paddingRight = "40px";
Tipp

Mit der Eigenschaft padding können Sie die Innenabstände aller Seiten eines Elements in einer einzigen Deklaration setzen.

Syntax

Syntax der CSS-Eigenschaft padding-right

padding-right: length | initial | inherit;

Beispiel der padding-right-Eigenschaft:

Beispiel der CSS-Eigenschaft padding-right mit px-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #8ebf42;
        padding-right: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Padding-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS padding-right Eigenschaft

Beispiel der padding-right-Eigenschaft mit dem Wert "length":

Beispiel der CSS-Eigenschaft padding-right mit pt-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px solid #000;
        color: #8ebf42;
        padding-right: 100pt;
      }
    </style>
  </head>
  <body>
    <h2>Padding-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </body>
</html>
Probier es selbst »

Beispiel der padding-right-Eigenschaft mit Prozentangabe:

Beispiel der CSS-Eigenschaft padding-right mit %-Wert:

Ein Prozentwert wird relativ zur Breite des umgebenden Blocks des Elements berechnet, nicht zur Höhe. Das bedeutet, dass der rechte Innenabstand skaliert, wenn das Layout breiter oder schmaler wird — nützlich für flüssige, responsive Abstände.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #cccccc;
        color: deepskyblue;
        padding: 15px;
        padding-right: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Padding-right property example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
lengthLegt den rechten Innenabstand in px, pt, cm usw. fest. Der Standardwert ist 0px.Ausprobieren »
%Legt den rechten Innenabstand als Prozentwert der Breite des umgebenden Elements fest.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Wann padding-right verwenden

Verwenden Sie padding-right, wenn Sie nur auf der rechten Seite eines Rahmens Platz benötigen — zum Beispiel, um Text von einem nachgestellten Symbol freizuhalten, Platz für eine Scrollleiste zu lassen oder asymmetrische Abstände in einer Karte auszugleichen. Wenn Sie auf allen Seiten gleiche Abstände benötigen, bevorzugen Sie die padding-Kurzschreibweise; wenn Sie den Abstand außerhalb des Rahmens statt innerhalb benötigen, verwenden Sie margin-right.

Einige wichtige Punkte:

  • Padding gehört zum klickbaren / Hintergrundbereich. Die Hintergrundfarbe und das Hintergrundbild eines Elements erstrecken sich über den Innenabstand — anders als beim Margin.
  • Negative Werte sind ungültig. Um Inhalt in die andere Richtung zu verschieben, verwenden Sie stattdessen ein negatives margin.
  • Es verbreitert das Element standardmäßig. Im standardmäßigen content-box-Modell erhöht padding-right die Gesamtbreite des Elements. Setzen Sie box-sizing: border-box, um die angegebene Breite fest zu halten und den Innenabstand nach innen aufzunehmen.

Verwandte Eigenschaften

Übung

Übung
Was ist die Funktion der padding-right-Eigenschaft in CSS?
Was ist die Funktion der padding-right-Eigenschaft in CSS?
Was this page helpful?