Style padding-Eigenschaft

Definition und Verwendung

Padding Diese Eigenschaft setzt oder gibt die Innenabstände des Elements zurück.

Diese Eigenschaft kann einen bis vier Werte haben:

Margin-Eigenschaft und Padding-Eigenschaft Einfügen von Leerzeichen um das Element herum. Aber der Unterschied liegt darin, dass Margin Leerzeichen um den Rahmen einfügt, während Padding im Rahmen des Elements Leerzeichen einfügt.

  • Ein Wert, zum Beispiel: div {padding: 50px} - Alle vier Seiten haben einen Innenabstand von 50px
  • Zwei Werte, zum Beispiel: div {padding: 50px 10px} - Der obere und untere Innenabstand beträgt 50px, der linke und rechte Innenabstand beträgt 10px
  • Drei Werte, z.B.: div {padding: 50px 10px 20px} - Oberer Innenabstand ist 50px, linker und rechter Innenabstand ist 10px, unterer Innenabstand ist 20px
  • Vier Werte, z.B.: div {padding: 50px 10px 20px 30px} - Oberer Innenabstand ist 50px, rechter Innenabstand ist 10px, unterer Innenabstand ist 20px, linker Innenabstand ist 30px

Weitere Informationen:

CSS-Tutorial:CSS-Innenabstand

CSS-Referenzhandbuch:Padding-Eigenschaft

Beispiel

Beispiel 1

Den Innenabstand des <div>-Elements setzen:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Selbst ausprobieren

Beispiel 2

Den Innenabstand aller vier Seiten des <div>-Elements auf "25px" ändern:

document.getElementById("myDiv").style.padding = "25px";

Selbst ausprobieren

Beispiel 3

Rückgabewert des Innenabstands des <div>-Elements:

alert(document.getElementById("myDiv").style.padding);

Selbst ausprobieren

Beispiel 4

Unterschied zwischen der margin- und padding-Eigenschaft:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Selbst ausprobieren

Syntax

Padding-Eigenschaft zurückgeben:

object.style.padding

Padding-Eigenschaft setzen:

object.style.padding = "%|length|initial|inherit"

Eigenschaftswert

Wert Beschreibung
% Inneren Abstand mit dem Prozentsatz der Breite des Elternelements definieren.
length Inneren Abstand mit Längenmaß definieren.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem Elternelement erben. Siehe inherit.

Technische Details

Standardwert: 0
Rückgabewert: Zeichenkette, die den Innenabstand des Elements darstellt.
CSS-Version: CSS1

Browser unterstützt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung