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.
