Style paddingEigenschaft

Style 对象参考手册Style-Objekt

Definition und Verwendung

Die padding-Eigenschaft legt den Innenabstand eines Elements fest oder gibt ihn zurück.

Diese Eigenschaft kann 1 bis 4 Werte annehmen:

  • Wenn ein Wert angegeben wird, wie: div {padding: 50px} - sind alle vier Innenabstände 50px.
  • Wenn zwei Werte angegeben werden, wie: div {padding: 50px 10px} - sind die oberen und unteren Innenabstände 50px, die linken und rechten Innenabstände sind 10px.
  • Wenn drei Werte angegeben werden, wie: div {padding: 50px 10px 20px} - ist der obere Innenabstand 50px, die linken und rechten Innenabstände sind 10px, der untere Innenabstand ist 20px.
  • Wenn vier Werte angegeben werden, wie: div {padding: 50px 10px 20px 30px} - ist der obere Innenabstand 50px, der rechte Innenabstand ist 10px, der untere Innenabstand ist 20px, der linke Innenabstand ist 30px.

Syntax

Setzen Sie die padding-Eigenschaft:

Object.style.padding="%|length|inherit"

Die padding-Eigenschaft zurückgeben:

Object.style.padding

Wert Beschreibung
% Definiert einen prozentualen Innenabstand basierend auf der Breite des Elternelements.
length Definiert die Breite des Innenabstands unter Verwendung von Einheiten wie px, cm usw.
inherit Das Padding wird vom übergeordneten Element geerbt.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle gängigen Browser unterstützen die padding-Eigenschaft.

Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".

Tipps und Hinweise

Sowohl die margin-Eigenschaft als auch die padding-Eigenschaft fügen Platz um ein Element ein. Der Unterschied besteht jedoch darin, dass margin Platz außerhalb des Rahmens einfügt, während padding Platz innerhalb des Rahmens des Elements einfügt.

Beispiel

Beispiel

Ändern Sie das Padding eines div-Elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<style type="text/css">
div{
    border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
    document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
    document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>

<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie den Außenabstand des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den Innenabstand des div-Elements</button>

</body>
</html>

Selbst ausprobieren »

Style 对象参考手册Style-Objekt Andere Erweiterungen