Die CSS Ränder(margin)-Eigenschaft wird verwendet um Leeraum um Elemente zu programmieren, ausserhalb von definierten Grenzen(borders).
Mit CSS kannst du die Ränder(margin)-Eigenschaft kontrollieren. Da sind Eigenschaften zum programmieren margins auf jeder Seite eines Elementes.
(oben , rechts, unten und links).
margin-top
margin-right
margin-bottom
margin-left
Die margin Eigenschaft kann haben folgende Werte:
auto.
Länge, pt, cm, etc.
% von der Breite vom beinhaltenden Element.
erben(inherit)-Element.
Tip: Negative Werte sind erlaubt.
Vier unterschiedliche Margins für jede Seite eines Elementes in Pixel:
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Verwendet margin-Eigenschaften für jede Seite eines Element</h2>
<main>Dieses main Element hat ein Margin von 100px oben, rechts eines von 150px, unten eines von 100px und links ein Margin von 80px.</main>
</body>
</html>
In diesem Beispiel vererbt das (
<main>)-Element ein linkes Margin an das
<p class="inherit"> Element:
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid dodgerblue;
margin-left: 50px;
}
p.inherit {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Verwende den inherit(vererbt)-Wert</h2>
<p>Das Links margin ist vererbt vom Eltern-Element:</p>
<main>
<p class="inherit">Dieser Absatz hat ein geerbtes linkes Margin (vom main-Element).</p>
</main>
</body>
</html>
Margin
Um die Schreibweise zu verkürzen, es ist möglich alle Margin-Eigenschaften zusammenzufassen in eine einzige Eigenschaft.
Die margin-Eigenschaft ist eine Kurzschreibweise für folgende einzelne Margin-Eigenschaften:
margin-top
margin-right
margin-bottom
margin-left
So funktionierts:
Wenn die Margin-Eigenschaften für jede Seite definiert wird:
margin: 25px 50px 75px 100px;
Oben margin ist 25px
Rechts margin ist 50px
Unten margin ist 75px
Links margin ist 100px
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die Kurzschreibweise für Margin</h2>
<main>Dieses main-Element hat oben ein Margin von 25px, rechts eines von 50px, unten eines von 75px und links ein Margin von 100px.</main>
<hr>
</body>
</html>
Wenn die Margin-Eigenschaft drei Werte hat:
margin: 25px 50px 75px;
oben: margin ist 25px;
rechts und links ein Margin von 50px;
unten: margin ist 75px;
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die Kurzschreibweise für Margin</h2>
<main>Dieses main-Element hat oben ein Margin von 25px, rechts und links eines von 50px und unten ein Margin von 75px.</main>
<hr>
</body>
</html>
Wenn die Margin-Eigenschaft zwei Werte hat:
margin: 25px 50px;
oben und unten das Margin ist 25px
rechts und links ein Margin von 50px
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
margin: 25px 50px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die Kurzschreibweise für Margin</h2>
<main>Dieses main-Element hat oben und unten ein Margin von 25px, rechts und links eines von 50px.</main>
<hr>
</body>
</html>
Wenn die Margin-Eigenschaft einen Wert hat:
margin: 50px;
oben , unten, rechts und links ein Margin von 50px
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
margin: 50px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die Kurzschreibweise für Margin</h2>
<main>Dieses main-Element hat auf jeder Seite ein Margin von 50px.</main>
<hr>
</body>
</html>
Margin-Collapse:
Oberes und unteres Margins eines Elementes kollabieren manchmal in ein einzelnes Margin.
Es übernimmt immer den grösseren Margin-Wert der Beiden.
Dies passiert nicht mit rechten und linken Margins! Nur mit oberen und unteren Margins!
Schau auf das folgende Beispiel:
Es wird ein Margin-Collapse demonstriert:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
border: 1px solid black;
}
h2 {
margin: 20px 0 0 0;
border: 1px solid black;
}
</style>
</head>
<body>
<p>In diesem Beispiel das h1-Element hat ein Margin unten von 50px und das h2-Element hat oben ein Margin von 20px.</p>
<p>Das verticale Margin zwischen h1 und h2 sollte 70px (50px + 20px) haben.</p>
<p>Aufgrund des Margin-collapse das aktuelle Margin beträgt nur 50px(der grössere Wert).</p>
<p>Schauen Sie sich sonst mal das Layout in den Entwicklertools an!!!</p>
