Margins

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 35 von 76.

In CSS ist margin der Platz um ein Element herum, außerhalb aller definierten Rahmen. Es ist ein weiterer wesentlicher Bestandteil des Box-Modells. Margins werden verwendet, um Platz zwischen Elementen zu schaffen und sie voneinander zu trennen.

Sie können den Außenabstand (Margin) an allen vier Seiten eines Elements (oben, rechts, unten und links) unabhängig voneinander oder mithilfe der Kurzschreibweise steuern.

Hier ist die grundlegende Syntax für die Verwendung der margin-Eigenschaft:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Der Außenabstand an der Oberseite des Elements.
margin-right: Der Außenabstand an der rechten Seite des Elements.
margin-bottom: Der Außenabstand an der Unterseite des Elements.

margin-left: Der Außenabstand auf der linken Seite des Elements.
value: Der gewünschte Wert für den Außenabstand, der in Pixeln (px), ems (em), Prozent (%) oder anderen gültigen CSS-Einheiten angegeben werden kann.

Sie können auch die Kurzschreibweise verwenden, um den Außenabstand für alle vier Seiten gleichzeitig festzulegen, zum Beispiel:

p {
    margin: 20px; /* Wendet denselben Außenabstand auf alle vier Seiten an */
}

div {
    margin: 10px 25px; /* Legt den oberen und unteren Außenabstand auf 10px sowie den linken und rechten Außenabstand auf 25px fest */
}

.button {
    margin: 15px 30px 10px 5px;/* Legt den Außenabstand für jede Seite einzeln fest */
}

In diesem Beispiel haben alle <p>-Elemente einen Margin von 20px auf allen Seiten, alle <div>-Elemente haben einen oberen und unteren Margin von 10px und einen linken und rechten Margin von 25px, und alle Elemente mit der Klasse button haben einen oberen Margin von 15px, einen rechten Margin von 30px, einen unteren Margin von 10px und einen linken Margin von 5px.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einer Überschrift (<h1>) und einem Bereich (<div>). Ihre Aufgabe ist es, die margin-Eigenschaft zu verwenden, um Platz um diese Elemente herum hinzuzufügen. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <h1>-Element anspricht. Setzen Sie den margin auf allen Seiten auf 20px.
Schreiben Sie eine CSS-Regel, die das <div>-Element anspricht. Setzen Sie den oberen und unteren margin auf 10px und den linken und rechten margin auf 30px.

Spickzettel

Die Eigenschaft margin erzeugt Platz um ein Element herum, außerhalb jeglicher Rahmen. Sie können den Außenabstand an allen vier Seiten unabhängig steuern oder die Kurzschreibweise verwenden.

Einzelne margin-Eigenschaften:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

Kurzschreibweise:

/* Gleicher Außenabstand auf allen Seiten */
margin: 20px;

/* Oben/Unten: 10px, Links/Rechts: 25px */
margin: 10px 25px;

/* Oben: 15px, Rechts: 30px, Unten: 10px, Links: 5px */
margin: 15px 30px 10px 5px;

Probier es selbst

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>