EMZETT.Jedes HTML-Element ist für CSS eine rechteckige Box. Das Box-Modell beschreibt ihre vier Schichten von innen nach außen:
| Schicht | Eigenschaft | Bedeutung |
|---|---|---|
| Inhalt (content) | width, height | Text, Bild |
| Innenabstand (padding) | padding | Luft zwischen Inhalt und Rand |
| Rahmen (border) | border | Linie um die Box |
| Außenabstand (margin) | margin | Abstand zu anderen Boxen |
Ergebnis
Öffne die Entwicklerwerkzeuge (F12) und fahre über ein Element: Der Browser zeigt farbig die vier Schichten.
padding und margin
Die Kurzschreibweise nimmt 1 bis 4 Werte:
| Schreibweise | Bedeutung |
|---|---|
margin: 10px | alle vier Seiten |
margin: 10px 20px | oben/unten, links/rechts |
margin: 10px 20px 30px | oben, links/rechts, unten |
margin: 10px 20px 30px 40px | oben, rechts, unten, links (im Uhrzeigersinn) |
Einzelne Seiten: margin-top, margin-right, margin-bottom, margin-left (ebenso bei padding). Moderner und sprachunabhängig: margin-inline, margin-block, padding-inline, padding-block.
Ergebnis
Zentrieren: Ein Block mit fester oder maximaler width wird mit margin: 0 auto horizontal zentriert.
Margin kollabiert
Vertikale Außenabstände benachbarter Blöcke verschmelzen zum größeren Wert (nicht zur Summe):
Ergebnis
Um das zu vermeiden, nutzt man oft nur margin-bottom oder Flex/Grid mit gap.
border
Ergebnis
Stile: solid, dashed, dotted, double, groove, ridge, none. Mit border-radius rundest du Ecken, bei 50 % eines Quadrats entsteht ein Kreis.
Die Größe: box-sizing
Standardmäßig bezieht sich width nur auf den Inhalt. Padding und Rahmen kommen oben drauf. Das führt zu unerwarteten Breiten:
Ergebnis
Fast jedes Projekt beginnt deshalb mit:
*, *::before, *::after {
box-sizing: border-box;
}width, height und Überlauf
| Eigenschaft | Bedeutung |
|---|---|
width, height | feste Größe (Blöcke: Breite standardmäßig 100 %) |
min-width, max-width | Grenzen; max-width: 100% hält Bilder im Rahmen |
min-height | Mindesthöhe (besser als feste Höhe) |
aspect-ratio | Seitenverhältnis: 16 / 9 |
overflow | was bei zu viel Inhalt passiert: visible, hidden, auto, scroll |
Ergebnis
Schatten und Umrisse
Ergebnis
box-shadow: x y unschärfe ausbreitung farbe; mit inset nach innen. Schatten brauchen keinen Platz und beeinflussen das Layout nicht.
Inline, Block und Inline-Block
Elemente sind standardmäßig Block (div, p, h1: eigene Zeile, volle Breite) oder Inline (span, a, strong: im Textfluss). Bei Inline-Elementen wirken width, height und vertikale margin nicht. Mehr im nächsten Kapitel (display).
Merke
- Box = Inhalt + Padding + Border + Margin
- Setze
box-sizing: border-boxfür alle Elemente margin: 0 autozentriert Blöcke mit begrenzter Breite- Vertikale Margins benachbarter Blöcke verschmelzen
max-width: 100%; height: automacht Bilder flexibel;overflowsteuert Überlaufbox-shadowundborder-radiusbrauchen keinen Platz im Layout
Aufgabe
Baue eine Karte mit 24 px Innenabstand, 1 px Rahmen, abgerundeten Ecken, leichtem Schatten und einer maximalen Breite von 360 px, zentriert auf der Seite.