CSS-Einführungs-Tutorial: Margin-Attribut

Der einfachste Weg, Ränder festzulegen, ist die Verwendung des Margin-Attributs. Der Rand wird verwendet, um den Abstand zwischen Objektbeschriftungen festzulegen. Wenn beispielsweise zwei DIV-Boxen übereinander angeordnet sind, können wir den Randstil verwenden, um den Abstand zwischen den beiden Boxen darüber und darunter zu ermitteln. Die Eigenschaft „margin“ akzeptiert jede Längeneinheit, die Pixel, Zoll, Millimeter oder Ems sein kann. Der Rand kann auf „Auto“ eingestellt werden. Ein häufigerer Ansatz besteht darin, einen Längenwert für die Ränder festzulegen. Die folgende Anweisung legt einen 1/4 Zoll breiten Rand auf jeder Seite des h1-Elements fest: h1 {margin : 0.25in;} Im Folgenden werden unterschiedliche Ränder für die vier Seiten des h1-Elements und die verwendeten Längeneinheiten definiert. ist das Pixel (px):

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

entspricht der Einstellung des Abstands. Die Reihenfolge dieser Werte beginnt am oberen Rand (oben) und dreht sich im Uhrzeigersinn um Darüber hinaus können Sie mit „Margin“ auch einen Prozentwert festlegen: p {margin : 10 %;}, sodass der Rand des p-Elements 10 % der Breite seines übergeordneten Elements beträgt. Der Standardwert für den Rand ist 0. Wenn Sie also keinen Wert für den Rand angeben, werden keine Ränder angezeigt. In der Praxis stellen Browser jedoch für viele Elemente bereits vorgegebene Stile bereit, und Ränder bilden da keine Ausnahme. Verwenden Sie margin, um das Design zu zentrieren. Die grundlegende Verwendung lautet: margin:0 auto; um das Objekt zu zentrieren. Es ist jedoch eine Bedingung erforderlich, nämlich dass der Vorgesetzte des Objekts den Inhaltszentrierungsattributstil text-align:center festlegen muss. Einige Browser legen den Inhaltszentrierungsstil „text-align:center“ für das Body-Tag nicht fest. Wenn das zugrunde liegende enthaltende Objekt auf „margin: 0 auto“ festgelegt ist, wird das Layout jedoch zentriert, um mit den gängigen Browsern kompatibel zu sein Es wird empfohlen, eine Textausrichtung für den Attributstil body:center festzulegen.

CSS Single Margin Property

Sie können die Single Margin-Eigenschaft verwenden, um einen Wert für den Rand auf einer Seite eines Elements festzulegen. Angenommen, Sie möchten den linken Rand des p-Elements auf 20 Pixel festlegen. Sie können die folgende Methode verwenden:

p {margin-left: 20px;}

Sie können jedes der folgenden Attribute verwenden, um nur den Rand des entsprechenden Elements ohne festzulegen wirkt sich direkt darauf aus. Alle anderen Ränder: Rand oben, Rand rechts, Rand unten, Rand links
Sie können mehrere solcher einseitigen Attribute in einer Regel verwenden, zum Beispiel:

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

Sie können es auch wie folgt schreiben: p {margin: 20px 30px 30px 20px;}, die abgekürzte Logik lautet immer noch: oben, rechts, unten, links.

Das obige ist der detaillierte Inhalt vonCSS-Einführungs-Tutorial: Margin-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!