Die Anleitung zu CSS Margins
View more Tutorials:
CSS Margin wird verwendet, um einen Bereich um ein Element und außerhalb der Grenze des Element zu erstellen.

Nach der Standardsyntax sollen Sie 4 Werte für margin angeben:
/* Syntax: */ margin: top right bottom left; /* Example: */ margin: 5px 20px 30px 40px;
Anstatt 4 Werte für CSS margin anzugeben, können Sie 4 Properties CSS margin-top, margin-right, margin-bottom, margin-left CSS Margin verwenden.
margin-top: 5px; margin-right: 20px; margin-bottom: 30px; margin-right: 40px;
CSS margin kann auch 1,2 oder 3 Werte akzeptieren.
/* Apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5px 10px; /* top | horizontal | bottom */ margin: 10px 20px 30px;
Die möglichen Werte für CSS margin:
auto | Der Browser wird margin für Element automatisch rechnen. |
% | Geben Sie einen Wert in % für margin an, der in % im Vergleich von der Breite des nächsten Vorgange-Block-Element (Block-level Element) steht, das das aktuelle Element enthält. Sehen Sie die Erklärung am Ende des Artikel. |
px, cm, em,.. | Geben Sie einen konkreten Wert in px, cm, em,.. an. z.B 10px, 2cm, 3em,... |
inherit | Der Wert von margin wird aus dem Vater-Element geerbt. |
CSS margin akzeptiert die Prozent ( % ). Dieser Wert ist ein Prozentsatz im Verhältnis zur Breite vom Containing Block. Davon ist Containing Block das nächste Vorgang-Block-Element /block-level element), das das aktuelle Element enthält.
margin-percent-example.html
<!DOCTYPE html> <html> <head> <title>CSS Padding</title> <meta charset="UTF-8"/> <script> function changeParentSize() { var blockDiv = document.getElementById("blockDiv"); // offsetWidth = contentWidth + padding + border var offsetWidth = blockDiv.offsetWidth; if(offsetWidth > 300) { offsetWidth = 200; } blockDiv.style.width = (offsetWidth+1) + "px"; } </script> </head> <body> <h3>CSS Margin Percentage</h3> <div id="blockDiv" style="width:200px; height: 150px; border: 1px solid blue"> I am a div (Block-Level Element) <br/> <span style="background-color: yellow;"> I am a span (Inline Element) <div id= "redDiv" style="width:100px; margin:10%; border:1px solid red;"> width:100px; margin:10%; </div> </span> </div> <br/> <button onClick="changeParentSize()">Change size of 'blockDiv'</button> </body> </html>

CSS margin akzeptiert den Wert auto. Das ist eine gute Maßnahme wenn Sie das Element in die Mitte horizontal ausrichten.
margin-auto-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin</title> <meta charset="UTF-8"/> <style> .center-div { width: 150px; background-color: LightCyan; padding:10px; margin-left: auto; margin-right: auto } </style> </head> <body> <h3>CSS Margin auto</h3> <div class="center-div"> margin-left: auto; <br/> margin-right: auto; </div> </body> </html>
Notiz: Der vertikale CSS margin (margin-top & margin-bottom) wirkt sich nicht auf das Inline-Element aus. z.B <span> ist standardmäßig ein Inline-Element. Das vertikale margin wirkt sich auf es nicht.
margin-inline-element-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin</title> <meta charset="UTF-8"/> <style> div { background-color: yellow; } span { margin-top: 100px; margin-bottom: 100px; margin-left: 20px; margin-right: 20px; background-color: #eee; } </style> </head> <body> <h3>CSS Margin for Inline Element</h3> <div>I am a div</div> <span> I am a span. margin-top: 100px; margin-bottom: 100px; margin-left: 20px; margin-right: 20px; </span> <div>I am a div</div> </body> </html>
Wenn Sie möchten, dass das vertikale margin mit dem Inline-Element funktioniert, sollen Sie es zum Block-Level Element oder Inline-block Element umwanden.
span { display: block; } /* OR: */ span { display: inline-block; }
Der untere und obene Rand von 2 benachbarten Block-Level Elemente verbinden sich manchmal zu einem einzigen Rand mit der Größe, die die größten Größe der 2 obengemeinten Ränder hat. Dieses Verhalten wird ein Randeinbruch (margin collapsing) genannt. Notiz: Bei Elementen mit {float:left|right} oder {position:absolute} tritt kein Randeinbruch auf.

Das Randeinbruch (margin collapsing) mit der Teilnahme der Elemente:

margin-collapsing-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { border:1px solid green; } button { margin-top:10px; } </style> <script> function addDiv2MarginTop(delta) { var div2 = document.getElementById("div2"); var style = window.getComputedStyle(div2); var marginTopString = style.marginTop;// 20px var marginTopInt = parseInt(marginTopString.substr(0,marginTopString.length-2)); // 20 var newMarginTopString = (marginTopInt + delta) + "px"; div2.style.marginTop = newMarginTopString; div2.innerHTML = "height:50px; margin-top: " + newMarginTopString; } </script> </head> <body> <h3>CSS Margin Collapsing</h3> <div style="height:50px; margin-bottom:50px"> height:50px; margin-bottom:50px; </div> <div style="height:50px; margin-top:40px" id="div2"> height:50px; margin-top:40px </div> <button onClick="addDiv2MarginTop(3)">Div2 margin-top (+)</button> <button onClick="addDiv2MarginTop(-3)">Div2 margin-top (-)</button> </body> </html>
Wenn 2 Elemente (block-level element) benachtbar sind, machen sie das Einbruch (das obere Beispiel sehen). Aber wenn das 2.Element CSS {float:left|right} eingestellt wird, tritt das Randeinbruch nicht auf.

floating-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { border:1px solid green; } p { color:red; font-style:italic; } </style> </head> <body> <h3>CSS Margin Collapsing</h3> <p>Margin Collapsing does not work with {float:left|right}</p> <div style="height:50px; margin-bottom:50px;"> height:50px; margin-bottom:50px; </div> <div style="height:50px; margin-top:40px; float:right" id="div2"> height:50px; margin-top:40px; float:right; </div> </body> </html>
Vaterelemtn und Kinderelementen
Wenn das Vaterelement keinen border, padding hat und das erste Sub-Element ein Block-level Element ist, das kein {float:left|right} hat, tritt das Randeinbruch mit margin-top des Sub-Element und ein anderes Element außerhalb des Vater-Element auf.
margin-collapsing-example2.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { background: lavender; } p { margin-top: 30px; margin-left: 15px; margin-right: 15px; background: yellow; height: 30px; } </style> </head> <body> <h3>CSS Margin Collapsing (Parent and First Child)</h3> <div style="margin-bottom:15px;">This is a div {margin-bottom: 15px;}</div> <div style="min-height:50px;"> <p> Child Paragraph 1 - margin-top: 30px; </p> <p> Child Paragraph 2 - margin-top: 30px; </p> This parent element contains two paragraphs! </div> </body> </html>
Wenn das Vaterelement kein border, padding, hat und das letzte Sub-Element ein Block-level element ohne {float:left|right} ist, wird das Randeinbruch (margin collapsing) mit margin-bottom des Sub-Element und ein anderes Element außerhalb des Vater-Element auftreten.
margin-collapsing-example3.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { background: lavender; } p { margin-bottom: 30px; margin-left: 15px; margin-right: 15px; background: yellow; height: 30px; } </style> </head> <body> <h3>CSS Margin Collapsing (Parent and last Child)</h3> <div style="min-height:50px;">This parent element contains two paragraphs! <p> Child Paragraph 1 - margin-bottom: 30px; </p> <p> Child Paragraph 2 - margin-bottom: 30px; </p> </div> <div style="margin-top:15px;">This is a div {margin-top: 15px;}</div> </body> </html>
Das leere Element.
Wenn ein Element ein leeres Block ohne border, padding, height, min-height ist, wird sein margin-top und margin-bottom zu einem Wert zusammenbrechen.
empty-block-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> </head> <body> <h3>CSS Margin Collapsing (Empty block)</h3> <div style="height:40px; background-color: yellow;"> height:40px; </div> <div style="margin-top:40px; margin-bottom:50px;"> <!-- This is Empty Block --> <!-- No border, padding, height, min-height --> </div> <div style="height:50px; background-color: yellow;"> height:50px; </div> </body> </html>
Notiz:
Wenn ein negatives margin an das Randumbruch teilnimmt, wird der verwendete Wert margin die Summe von größten positven margin und der meist negativen margin.