Innenabstand

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

In CSS ist padding der Abstand zwischen dem Inhalt eines Elements und seinem Rahmen. Padding wird verwendet, um rund um den Inhalt visuellen Freiraum zu schaffen und ihn dadurch lesbarer und optisch ansprechender zu gestalten. Du kannst das Padding 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 padding-Eigenschaft:

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

padding-top: Der Innenabstand auf der Oberseite des Elements.
padding-right: Der Innenabstand auf der rechten Seite des Elements.
padding-bottom: Der Innenabstand auf der Unterseite des Elements.

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

Du kannst auch die Kurzschreibweise verwenden, um das Padding für alle vier Seiten gleichzeitig festzulegen, zum Beispiel:

p {
    padding: 20px; /* Wendet denselben Padding auf alle vier Seiten an */
}

div {
    padding: 10px 25px; /* Setzt den oberen und unteren Padding auf 10px und den linken und rechten Padding auf 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Setzt den Padding für jede Seite einzeln */
}

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

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit zwei Überschriften. Ihre Aufgabe ist es, die Eigenschaft padding zu verwenden, um Abstände um den Inhalt dieser Elemente hinzuzufügen. Folgen Sie den unten stehenden Schritten:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie das padding auf allen Seiten auf 20px.
Schreiben Sie eine CSS-Regel, die auf das <h2>-Element abzielt. Setzen Sie das obere und untere padding auf 10px und das linke und rechte padding auf 30px.

Probier es selbst

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>