Padding

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

In CSS ist Padding der Raum zwischen dem Inhalt eines Elements und seinem Rahmen. Padding wird verwendet, um visuellen Freiraum um den Inhalt herum zu schaffen, wodurch dieser lesbarer und optisch ansprechender wird. Sie können das Padding auf 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.

Sie können auch die Kurzschreibweise verwenden, um den Innenabstand (Padding) für alle vier Seiten gleichzeitig festzulegen, zum Beispiel:

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

div {
    padding: 10px 25px; /* Legt den oberen und unteren Innenabstand auf 10px sowie den linken und rechten Innenabstand auf 25px fest */
}

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

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.

Spickzettel

CSS padding erzeugt Raum zwischen dem Inhalt eines Elements und seinem Rahmen.

Einzelne Padding-Eigenschaften:

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

Kurzschreibweise:

/* Gleicher Innenabstand auf allen Seiten */
padding: 20px;

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

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

Werte können in Pixeln (px), ems (em), Prozent (%) oder anderen gültigen CSS-Einheiten angegeben werden.

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>