Außenabstände

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

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

Du kannst den Außenabstand auf allen vier Seiten eines Elements (oben, rechts, unten und links) unabhängig voneinander oder mithilfe einer Kurzschreibweise festlegen.

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 auf allen Seiten einen Außenabstand von 20px, alle <div>-Elemente oben und unten einen Außenabstand von 10px sowie links und rechts einen Außenabstand von 25px, und alle Elemente mit der Klasse button haben oben einen Außenabstand von 15px, rechts von 30px, unten von 10px und links 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.

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>