Detaillierte Erläuterung der Verwendung des CSS-Margin-Attributs

Der einfachste Weg, Ränder festzulegen, ist die Verwendung des Margin-Attributs.

Das Randattribut akzeptiert jede Längeneinheit, die Pixel, Zoll, Millimeter oder Ems sein kann.

Der Rand kann auf „Automatisch“ eingestellt werden. Ein häufigerer Ansatz besteht darin, einen Längenwert für die Ränder festzulegen. Die folgende Deklaration legt einen 1/4-Zoll-Rand auf allen Seiten des h1-Elements fest:

h1 {margin : 0.25in;}

Das folgende Beispiel legt die vier Seiten des h1-Elements unterschiedlich fest Die Ränder werden jeweils definiert und die verwendete Längeneinheit ist Pixel (px):

h1 {margin : 10px 0px 15px 5px;}

sind die gleichen wie die Einstellungen für den inneren Rand Die Anzahl der Werte beginnt am oberen Rand (oben) und dreht sich im Uhrzeigersinn um das Element:

Rand: oben rechts unten links

Darüber hinaus können Sie auch einen Prozentwert für den Rand festlegen:

p {margin : 10%;}

Der Prozentsatz wird relativ zur Breite des übergeordneten Elements berechnet. Das obige Beispiel legt die Ränder für das p-Element auf 10 % der Breite seines übergeordneten Elements fest.

Der Standardwert für die Marge ist 0. Wenn also kein Wert für die Marge angegeben ist, wird keine Marge angezeigt. In der Praxis stellen Browser jedoch für viele Elemente bereits vorgegebene Stile bereit, und Ränder bilden da keine Ausnahme. Beispielsweise erzeugen Ränder in Browsern, die CSS unterstützen, „leere Zeilen“ über und unter jedem Absatzelement. Wenn für das p-Element kein Rand deklariert ist, kann der Browser daher selbst einen anwenden. Solange Sie dies ausdrücklich deklarieren, wird der Standardstil natürlich überschrieben.

Wert kopieren

Erinnern Sie sich? Wir haben das Kopieren von Werten in den beiden vorherigen Abschnitten erwähnt. Im Folgenden erklären wir Ihnen, wie Sie Value Copy nutzen.

Manchmal geben wir einige wiederholte Werte ein:

p {margin: 0.5em 1em 0.5em 1em;}

Beim Kopieren von Werten müssen Sie ihn nicht eingeben wiederholt Dieses Zahlenpaar. Die obige Regel entspricht der folgenden Regel:

p {margin: 0.5em 1em;}

Diese beiden Werte können die vorherigen 4 Werte ersetzen. Wie wird das gemacht? CSS definiert Regeln, die die Angabe von weniger als 4 Werten für Ränder ermöglichen. Die Regeln lauten wie folgt:

Wenn der Wert des linken Randes fehlt, wird der Wert des rechten Randes verwendet.

Wenn der Wert des unteren Randes fehlt, wird der Wert des oberen Randes verwendet.

Wenn der Wert des rechten Randes fehlt, wird der Wert des oberen Randes verwendet.

Das folgende Bild bietet eine intuitivere Möglichkeit, dies zu verstehen:

Mit anderen Worten, wenn 3 Werte für den Rand angegeben werden, wird der 4. Wert (d. h. der linke Rand) kopiert der 2. Wert (rechter Rand). Wenn zwei Werte angegeben werden, wird der 4. Wert vom 2. Wert kopiert und der 3. Wert (unterer Rand) wird vom 1. Wert (oberer Rand) kopiert. Wenn im letzten Fall nur ein Wert angegeben ist, werden die anderen drei Ränder von diesem Wert kopiert (oberer Rand).

Mit diesem einfachen Mechanismus müssen Sie nur die notwendigen Werte angeben, ohne alle 4 Werte anwenden zu müssen, zum Beispiel:

h1 {margin: 0.25em 1em 0.5em;} / * Entspricht 0,25em 1em 0,5em 1em */h2 {margin: 0,5em 1em;} /* Entspricht 0,5em 1em 0,5em 1em */p {margin: 1px;} /* Entspricht 1px 1px 1px 1px * /

Dieser Ansatz hat einen kleinen Nachteil: Sie werden mit Sicherheit irgendwann auf dieses Problem stoßen. Angenommen, Sie möchten den oberen und linken Rand des p-Elements auf 20 Pixel und den unteren und rechten Rand auf 30 Pixel festlegen. In diesem Fall müssen Sie Folgendes schreiben:

p {margin: 20px 30px 30px 20px;}

um das gewünschte Ergebnis zu erhalten. Leider kann in diesem Fall die Anzahl der erforderlichen Werte nicht reduziert werden.

Schauen wir uns ein anderes Beispiel an. Wenn Sie möchten, dass alle Ränder außer dem linken Rand automatisch sind (der linke Rand ist 20 Pixel):

p {margin: auto auto auto 20px;}

Auf ähnliche Weise können Sie den gewünschten Effekt erzielen wollen. Das Problem ist, dass die Eingabe dieser Autos etwas umständlich ist. Wenn Sie die Ränder nur auf einer Seite eines Elements steuern möchten, verwenden Sie die Single-Margin-Eigenschaft.

Einseitige Randeigenschaft

Mit der einseitigen Randeigenschaft können Sie einen Wert für den Rand auf einer Seite eines Elements festlegen. Nehmen wir an, Sie möchten den linken Rand des p-Elements auf 20 Pixel festlegen. Anstatt „margin“ zu verwenden (wofür viel Auto eingegeben werden muss), können Sie Folgendes tun:

p {margin-left: 20px;}

Sie können zum Festlegen eine der folgenden Eigenschaften verwenden nur der entsprechende obere Rand oben, ohne alle anderen Ränder direkt zu beeinflussen:

margin-top

margin-right

margin-bottom

margin-left

Mehrere solcher einseitigen Attribute können in einer Regel verwendet werden, zum Beispiel:

h2 {
margin-top: 20px;
margin-right: 30px;
margin -bottom: 30px;
margin-left: 20px;
}

Natürlich könnte es in diesem Fall einfacher sein, margin:

p {margin: 20px zu verwenden 30px 30px 20px;}

Unabhängig davon, ob Sie einseitige Attribute oder Ränder verwenden, ist das Ergebnis dasselbe. Wenn Sie Ränder für mehrere Seiten festlegen möchten, ist es im Allgemeinen einfacher, den Rand zu verwenden. Aus dokumentarischer Sicht spielt es jedoch keine Rolle, welche Methode Sie verwenden. Sie sollten daher die Methode wählen, die für Sie einfacher ist.

Tipps und Hinweise

Tipp: Der von Netscape und IE definierte Standard-Randwert für das Body-Tag beträgt 8 Pixel. Nicht so bei Opera. Im Gegensatz dazu definiert Opera den Standardwert des internen Innenabstands auf 8 Pixel. Wenn Sie also die Kanten der gesamten Website anpassen und in Opera korrekt anzeigen möchten, müssen Sie den Innenabstand des Körpers anpassen.

CSS-Randbeispiel:

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>

Legen Sie den rechten Rand des Texts fest:

<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>

Legen Sie den oberen Rand des Texts fest:

<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

Legen Sie den unteren Textrand fest:

<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

Alle Randeigenschaften in einer Deklaration:

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des CSS-Margin-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!