Style -Rand -Eigenschaft
Beispiel
Legen Sie alle vier Ränder eines <div>-Elements fest:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Definition und Verwendung
Die Eigenschaft margin legt die Ränder eines Elements fest oder gibt sie zurück.
Diese Eigenschaft kann einen bis vier Werte annehmen:
- Ein Wert, wie: div {margin: 50px} - alle vier Ränder sind 50px groß
- Zwei Werte, wie: div {margin: 50px 10px} – der obere und untere Rand beträgt 50 Pixel, der linke und der rechte Rand 10 Pixel
- Drei Werte, wie: div {margin: 50px 10px 20px} – der obere Rand beträgt 50px, der linke und rechte Rand 10px, der untere Rand 20px
- Vier Werte, wie: div {margin: 50px 10px 20px 30px} – der obere Rand ist 50px, der rechte Rand ist 10px, der untere Rand ist 20px, der linke Rand ist 30px
Sowohl die Eigenschaft margin als auch die Eigenschaft padding fügen Leerzeichen um ein Element ein. Der Unterschied besteht jedoch darin, dass margin den Abstand um den Rand einfügt, während padding den Abstand innerhalb des Rands eines Elements einfügt.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Syntax
Rückgabe der Margin-Eigenschaft:
object.style.margin
Legen Sie die Randeigenschaft fest:
object.style.margin = "%|length|auto|initial|inherit"
Eigenschaftswerte
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
| Standardwert: | 0 |
|---|---|
| Rückgabewert: | Ein String, der die Ränder eines Elements darstellt |
| CSS-Version | CSS1 |
Mehr Beispiele
Beispiel
Ändern Sie alle vier Ränder eines <div>-Elements in „25px“:
document.getElementById("myDiv").style.margin = "25px";
Beispiel
Gibt die Ränder eines <div>-Elements zurück:
alert(document.getElementById("myDiv").style.margin);
Beispiel
Unterschied zwischen der Eigenschaft margin und der Eigenschaft padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Verwandte Seiten
CSS-Tutorial: CSS-Rand
CSS-Referenz: Margin-Eigenschaft
❮ Style-Objekt