Heim > Artikel > Web-Frontend > So verwenden Sie das Margin-Attribut in HTML5
So verwenden Sie das Margin-Attribut in HTML5
- WBOYOriginal
- 2022-06-08 15:28:257311Durchsuche
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.
So verwenden Sie das Margin-Attribut in HTML5
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!