Padding
Padding
Padding ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
Willkommen zur CSS-Padding-Lektion.
Padding wird verwendet, um innerhalb der Grenzen unseres HTML-Elements einen Abstand zu erzeugen.
Wie beim Margin können wir dem Element ein Padding in vier Richtungen hinzufügen.
Prozentwert
Im vorherigen Beispiel haben wir einen Padding-Wert vom statischen Typ px zugewiesen. Wie beim Margin können wir auch einen Wert vom Typ Prozent festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
Code verkürzen
Wie beim Margin ist es möglich, Padding mit einer Kurzschreibweise in einer einzigen Zeile zu definieren.
Die Werte für das Padding oben, rechts, unten und links können jeweils durch Leerzeichen getrennt angegeben werden.
Sehen Sie sich unseren Beispielcode an. Sie werden feststellen, dass er dem Margin sehr ähnlich ist.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>Glückwunsch
Glückwunsch 🎉
In diesem Abschnitt haben wir CSS-Margins kennengelernt.
Im nächsten Abschnitt lernen wir Farben und Hintergründe kennen.
Häufig gestellte Fragen
Ist die Lektion „Padding“ kostenlos?
Ja — der vollständige Text von „Padding“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Padding“?
Padding Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Padding“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.