Ränder werden verwendet, um Platz um Elemente herum zu schaffen, außerhalb definierter Grenzen.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>
</body>
</html>
Die CSS-Eigenschaften margin werden verwendet, um Platz um Elemente herum zu schaffen. außerhalb definierter Grenzen.
Mit CSS haben Sie die volle Kontrolle über die Ränder. Es gibt Eigenschaften zum Festlegen des Randes für jede Seite eines Elements (oben, rechts, unten und links).
CSS verfügt über Eigenschaften zum Festlegen des jeweiligen Rands Seite eines Elements:
margin-topmargin-rightmargin-bottommargin-leftAlle Randeigenschaften können die folgenden Werte haben:
auto - der Browser berechnet die Marge
Länge - gibt einen Rand in px, pt, cm usw. an.
% - gibt einen Rand in % der Breite des enthaltenden Elements an
erben - gibt an, dass der Rand vom übergeordneten Element geerbt werden soll
Tipp: Negative Werte sind zulässig.
Legen Sie unterschiedliche Ränder für alle vier Seiten eines <p>-Elements fest:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Um den Code zu verkürzen, ist es möglich, alle Randeigenschaften in anzugeben eine Immobilie.
Die Eigenschaft margin ist eine Abkürzungseigenschaft für die folgenden einzelnen Randeigenschaften:
margin-topmargin-rightmargin-bottommargin-leftSo funktioniert es also:
Wenn die Eigenschaft margin vier Werte hat:
margin: 25px 50px 75px 100px;
Der obere Rand beträgt 25 Pixel
Der rechte Rand beträgt 50 Pixel
Der untere Rand beträgt 75 Pixel
Der linke Rand beträgt 100 Pixel
Verwenden Sie die Abkürzungseigenschaft „margin“ mit vier Werten:
p {
margin: 25px 50px 75px 100px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
Wenn die Eigenschaft margin drei Werte hat:
margin: 25px 50px 75px;
Der obere Rand beträgt 25 Pixel
Der rechte und linke Rand beträgt 50 Pixel
Der untere Rand beträgt 75 Pixel
Verwenden Sie die Abkürzungseigenschaft „margin“ mit drei Werten:
p { margin: 25px 50px 75px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 3 values</h2>
<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>
<hr>
</body>
</html>
Wenn die Eigenschaft margin zwei Werte hat:
margin: 25px 50px;
Der obere und untere Rand beträgt 25 Pixel
Der rechte und linke Rand beträgt 50 Pixel
Verwenden Sie die Abkürzungseigenschaft „margin“ mit zwei Werten:
p { margin: 25px 50px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
Wenn die Eigenschaft margin einen Wert hat:
margin: 25px;
Alle vier Ränder sind 25 Pixel groß
Verwenden Sie die Abkürzungseigenschaft „margin“ mit einem Wert:
p {
margin: 25px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right margin of 25px.</div>
<hr>
</body>
</html>
Sie können die Margin-Eigenschaft auf auto setzen, um das Element innerhalb seines Containers horizontal zu zentrieren.
Das Element nimmt dann die angegebene Breite und den verbleibenden Platz ein wird gleichmäßig auf den linken und rechten Rand aufgeteilt.
Rand verwenden: automatisch:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div>
This div will be horizontally centered because it has margin: auto;
</div>
</body>
</html>
In diesem Beispiel kann der linke Rand des Elements
vom übergeordneten Element geerbt werden (<div>):
Verwendung des Erbwerts:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>
Eine Abkürzungseigenschaft zum Festlegen aller Randeigenschaften in einer Deklaration
Legt den unteren Rand eines Elements fest
Legt den linken Rand eines Elements fest
Legt den rechten Rand eines Elements fest
Legt den oberen Rand eines Elements fest