So definieren Sie CSS-Ränder

Der Leerraum, der den Rand eines Elements umgibt, sind Ränder. Durch das Festlegen von Rändern entsteht zusätzlicher „Leerraum“ außerhalb des Elements.

Die einfachste Möglichkeit, Ränder festzulegen, ist die Verwendung der Margin-Eigenschaft, die jede Längeneinheit, jeden Prozentwert oder sogar einen negativen Wert akzeptiert.

CSS-Margin-AttributMargin-Eigenschaft.

Die Randeigenschaft 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 1/4 Zoll breite Ränder auf jeder Seite des h1-Elements fest:

h1 {margin : 0.25in;}

Das folgende Beispiel definiert unterschiedliche Ränder für die vier Seiten des h1-Elements, wobei die Längeneinheit Pixel (px) verwendet wird ):

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

Wie bei den Auffülleinstellungen beginnt die Reihenfolge dieser Werte am oberen Rand (oben) und dreht sich im Uhrzeigersinn um das Element:

margin: top right bottom left

Darüber hinaus können Sie Legen Sie außerdem einen Prozentwert für den Rand fest:

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.

Zum Beispiel erzeugen Ränder in Browsern, die CSS unterstützen, „leere Zeilen“ über und unter jedem Absatzelement.

Wenn daher kein Rand für das p-Element deklariert ist, kann der Browser selbst einen anwenden. Solange Sie dies ausdrücklich deklarieren, wird der Standardstil natürlich überschrieben.

Das obige ist der detaillierte Inhalt vonSo definieren Sie CSS-Ränder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!