Ein Paket im Regal
Stell dir ein Päckchen vor. Innen liegt das Geschenk. Darum liegt Füllmaterial, dann kommt der Karton. Zwischen zwei Päckchen im Regal bleibt etwas Platz.
Jedes Element einer Webseite ist so ein Päckchen. Du lernst heute, wie du die Abstände einstellst.
Am Ende dieser Lektion
Notiz
Ich kann mit CSS Innenabstand, Rand und Außenabstand eines Elements einstellen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Box | Das Rechteck, das jedes Element auf der Seite belegt. | |
| Innenabstand | Der Platz zwischen Inhalt und Rand. | padding: 10px; |
| Rand | Die Linie um die Box. | border: 2px solid black; |
| Außenabstand | Der Platz zwischen dieser Box und anderen Boxen. | margin: 10px; |
| Inhalt | Der Text oder das Bild in der Box. |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Start: Das weißt du schon
Probier es aus
Start: Das weißt du schon
4 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Jede Box hat vier Schichten
Von innen nach außen:
- der Inhalt
- der Innenabstand (
padding) - der Rand (
border) - der Außenabstand (
margin)
Der Innenabstand liegt innerhalb des Randes. Der Außenabstand liegt außerhalb.
Probiere es aus: Karten in der Mensa
<div class="karte">
<h2>Mensa heute</h2>
<p>Nudeln mit Tomatensoße, 3,50 €</p>
</div>
<div class="karte">
<h2>Pausenverkauf</h2>
<p>Brezel, 1,20 €</p>
</div>
Kontrolle: Die Schichten
Probier es aus
Kontrolle: Die Schichten
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.