"."/> ".">
Heim > Artikel > Web-Frontend > So verwenden Sie das Margin-Attribut in HTML5
In HTML5 wird das Attribut „margin“ verwendet, um den äußeren Rand eines Elements festzulegen. Dieses Attribut kann auf 1 bis 4 Werte festgelegt werden, die zum Festlegen der Werte der vier Ränder verwendet werden. Die Syntax lautet „<.“ ;element style="margin:oberer äußerer Rand Abstand vom rechten Rand zum unteren Rand zum linken Rand; ">".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.
Das Margin-Attribut legt den äußeren Rand eines Elements fest.
Dieses Attribut kann 1 bis 4 Werte annehmen:
Wenn Sie einen Wert angeben, z. B. div {margin: 50px} – alle Ränder betragen 50 px
Wenn Sie zwei Werte angeben, z. B. div {margin: 50px 10px } - Der obere und untere Rand betragen 50 Pixel und der linke und rechte Rand betragen 10 Pixel.
Wenn drei Werte angegeben werden, z. B. div {margin: 50px 10px 20px} – beträgt der obere Rand 50 px, der linke und rechte Rand 10 px und der untere Rand 20 px.
Wenn Sie vier Werte angeben, z. B. div {margin: 50px 10px 20px 30px} – der obere Rand beträgt 50 px, der rechte Rand beträgt 10 px, der untere Rand beträgt 20 px und der linke Rand beträgt 30 px.
Syntax:
Object.style.margin=margin
Prozent (basierend auf dem Prozentsatz der Gesamthöhe oder -breite des übergeordneten Objekts)
Längenwert (definiert einen festen Rand)
auto (der vom Browser festgelegte Wert).
Das Beispiel sieht wie folgt aus:
<html> <head> <script type="text/javascript"> function changeMargin() { document.getElementById("p1").style.margin="100px"; } </script> </head> <body> <input type="button" onclick="changeMargin()" value="Change margins of a paragraph" /> <p id="p1">This is a paragraph</p> </body> </html>
Ausgabeergebnis:
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Margin-Attribut in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!