Wie Sie wissen, schafft die CSS-Eigenschaft padding einen Raum um den Elementinhalt. Die CSS-Eigenschaft margin schafft einen Raum um das Element herum.
Die Margenwerte werden durch Länge oder Prozentsätze eingestellt und können negative Werte annehmen.
Hier sind die Eigenschaften von CSS-Margin:
Wir können die Eigenschaft margin für alle Seiten (oben, unten, links, rechts) verwenden. Für die Oberseite verwenden wir margin-top, für die Unterseite margin-bottom, für die linke Seite margin-left und für die rechte Seite margin-right.
Lassen Sie uns einige Beispiele Betrachten.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Ein Absatz mit den Eigenschaften background-color, color und margin.</p>
</body>
</html>Lassen Sie uns den Code erklären.
Wir verwenden die Eigenschaft background-color für den Hintergrund unseres Absatzes, die Eigenschaft color für die Farbe unseres Textes, und schließlich verwenden wir die Eigenschaft margin, um einen Raum um das Element herum zu erstellen. In diesem Beispiel verwenden wir einfach das Element p.
Nun über margin: 25px 10px 15px 20px. Dieser Code bedeutet, dass die Margin auf der Oberseite 25px, auf der rechten Seite 10px, auf der Unterseite 15px und auf der linken Seite 20px betragen muss.
Diese Eigenschaft verwenden wir, wenn wir die Werte für alle Seiten angeben. Es muss im Code so aussehen.
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Wenn alle Seiten die gleichen Werte haben, z. B. alle Seiten 50px sind, können wir es in css so schreiben.
p {
margin: 50px;
}Wenn wir die gleichen Werte für die Ober- und Unterseite (z. B. 15px) und die gleichen für die linke und rechte Seite (z. B. 10px) haben, dann können wir den folgenden Code verwenden.
p {
margin: 15px 10px;
}Das ist dasselbe wie der folgende Code.
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Wenn die Werte für die linke und die rechte Seite gleich sind, z. B. 15px, die Oberseite ist 5px und die Unterseite ist 10px, schreiben wir den folgenden Code.
p {
margin: 5px 15px 10px;
}Das ist dasselbe wie der folgende Code.
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Übe dein Wissen
