Rahmenmodell: CSS Außenabstand

Die leeren Bereiche um den Rahmen des Elements sind die Außenabstände. Das Setzen von Außenabständen erstellt zusätzliche "Leerzeichen" außerhalb des Elements.

Die einfachste Methode, Außenabstände zu setzen, ist die Verwendung der Eigenschaft margin, die jede Längenmaßeinheit, Prozentsatzwerte und sogar negative Werte akzeptiert.

CSS-margin-Attribut

Die einfachste Methode, Außenabstände zu setzen, ist Eigenschaft margin.

Die Eigenschaft margin akzeptiert jede Längenmaßeinheit, sei es Pixel, Zoll, Millimeter oder em.

Die Eigenschaft margin kann auf auto gesetzt werden. Eine häufigere Methode ist es, Längenwerte für die Außenabstände zu verwenden. Nachfolgende Anweisung setzt 1/4 Zoll breite Leerzeichen an den Seiten des h1-Elements:

h1 {margin : 0.25in;}

Nachfolgender Beispiel definiert die vier Seiten des h1-Elements mit verschiedenen Außenabständen, die Längenmaßeinheit ist Pixel (px):

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

Wie bei der Einstellung des Innenabstands, beginnt die Reihenfolge dieser Werte mit der oberen Marge (oben) und dreht sich um das Element im Uhrzeigersinn herum:

Marge: oben rechts unten links

Außerdem kann auch ein prozentualer Wert für die Marge festgelegt werden:

p {Marge: 10%;}

Prozentwerte werden berechnet im Verhältnis zur Breite des übergeordneten Elements. In diesem Beispiel beträgt die Marge des p-Elements 10% der Breite des übergeordneten Elements.

Die Standardwerte für Marge sind 0, daher erscheint kein Abstand, wenn keine Marge angegeben wird. Aber im tatsächlichen Leben bieten viele Elemente im Browser vorgegebene Stile, einschließlich der Margen. Zum Beispiel erzeugen Margen in Browsern, die CSS unterstützen, "Leerzeilen" oben und unten für jeden Absatzelement. Daher kann der Browser möglicherweise eine Marge selbst anwenden, wenn keine Marge für das p-Element angegeben wird. Natürlich wird die Standardgestaltung überschrieben, wenn Sie eine spezielle Erklärung abgeben.

Wertkopie

Denken Sie daran? Wir haben in den ersten beiden Abschnitten von Wertkopie gesprochen. Nachfolgend erläutern wir, wie Sie Wertkopie verwenden können.

Manchmal geben wir einige wiederholte Werte ein:

p {Marge: 0,5em 1em 0,5em 1em;}

Durch Wertkopie können Sie diese beiden Zahlen nicht wiederholt eingeben. Die obige Regel ist äquivalent zur folgenden Regel:

p {Marge: 0,5em 1em;}

Diese beiden Werte können die ersten 4 Werte ersetzen. Wie wird das erreicht? CSS definiert einige Regeln, die es erlauben, für den Abstand weniger als 4 Werte anzugeben. Die Regeln lauten wie folgt:

  • Fehlt der Wert des linken Abstands, wird der Wert des rechten Abstands verwendet.
  • Fehlt der Wert des unteren Abstands, wird der Wert des oberen Abstands verwendet.
  • Fehlt der Wert des rechten Abstands, wird der Wert des oberen Abstands verwendet.

Das folgende Diagramm bietet eine anschaulichere Methode, um dies zu verstehen:

CSS 值复制

Mit anderen Worten, wenn für den Abstand 3 Werte angegeben sind, wird der vierte Wert (also der linke Abstand) aus dem zweiten Wert (der rechte Abstand) kopiert. Wenn zwei Werte gegeben sind, wird der vierte Wert aus dem zweiten Wert kopiert, der dritte Wert (der untere Abstand) wird aus dem ersten Wert (der obere Abstand) kopiert. In der letzten Situation, wenn nur ein Wert angegeben ist, werden die anderen 3 Abstände von diesem Wert (dem oberen Abstand) kopiert.

Mit diesem einfachen Mechanismus müssen Sie nur die erforderlichen Werte angeben, ohne dass alle 4 Werte angewendet werden müssen, zum Beispiel:

h1 {Marge: 0,25em 1em 0,5em;}        /* Äquivalent zu 0,25em 1em 0,5em 1em */
h2 {Marge: 0,5em 1em;}        /* Äquivalent zu 0,5em 1em 0,5em 1em */
p {margin: 1px;}			/* Equivalent to 1px 1px 1px 1px */

This method has a small drawback, and you will definitely encounter this problem. Suppose you want to set the top and left margins of the p element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:

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

This is how you get the desired result. Unfortunately, in this case, there is no way to reduce the number of values needed.

Let's look at another example. If you want all margins except the left margin to be auto (the left margin is 20px):

p {margin: auto auto auto 20px;}

Similarly, this is how you get the desired effect. The problem is that typing these auto values can be麻烦. If you just want to control the margin on a single edge of an element, please use the single edge margin property.

Single Edge Margin Properties

You can use a single edge margin property to set the margin value on a single edge of an element. Suppose you want to set the left margin of the p element to 20px. You don't have to use margin (you need to type a lot of auto), but you can use the following method:

p {margin-left: 20px;}

You can use any of the following properties to set the margin on the corresponding side without affecting all other margins:

You can use multiple such single-edge attributes in one rule, for example:

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

Of course, in this case, using margin may be easier:

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

Whether using a single edge attribute or using margin, the result is the same. Generally speaking, if you want to set the margin for multiple sides, using margin will be easier. However, from the perspective of document display, actually using either method is not important, so you should choose the method that is easier for you.

Tips and Comments

Tip:Netscape and IE define the default margin (margin) value for the body tag as 8px. However, Opera is not the same. On the contrary, Opera defines the default value of the internal padding (padding) as 8px, so if you want to adjust the edge parts of the entire website and display them correctly in Opera, you must customize the padding of the body.

CSS Margin Example:

Set the left outer margin of the text
Dieses Beispiel zeigt, wie der linke Außenabstand des Textes eingestellt wird.
Einstellen des rechten Außenabstands des Textes
Dieses Beispiel zeigt, wie der rechte Außenabstand des Textes eingestellt wird.
Einstellen des oberen Außenabstands des Textes
Dieses Beispiel zeigt, wie der obere Außenabstand des Textes eingestellt wird.
Einstellen des unteren Außenabstands des Textes
Dieses Beispiel zeigt, wie der untere Außenabstand des Textes eingestellt wird.
Alle Außenabstandsattribute in einer Deklaration.
Dieses Beispiel zeigt, wie alle Außenabstandsattribute in einer Deklaration eingestellt werden können.

CSS-Außenabstandsattribute

Attribut Beschreibung
margin Kurzschreibattribut. Setzen Sie alle Außenabstandsattribute in einer Deklaration.
margin-bottom Setzen Sie den unteren Außenabstand des Elements.
margin-left Setzen Sie den linken Außenabstand des Elements.
margin-right Setzen Sie den rechten Außenabstand des Elements.
margin-top Setzen Sie den oberen Außenabstand des Elements.