Box-Modell

Jedes Element ist eine Box aus 4 Schichten:

┌─────────────────────────────┐
│          MARGIN             │  ← Außenabstand (durchsichtig)
│  ┌──────────────────────┐   │
│  │       BORDER         │   │  ← Rahmen
│  │  ┌────────────────┐  │   │
│  │  │    PADDING     │  │   │  ← Innenabstand
│  │  │  ┌──────────┐  │  │   │
│  │  │  │ CONTENT  │  │  │   │  ← Inhalt
│  │  │  └──────────┘  │  │   │
│  │  └────────────────┘  │   │
│  └──────────────────────┘   │
└─────────────────────────────┘

margin: 10pxalle 4 SeitenAußenabstand

margin: 10px 20pxoben/unten · links/rechts2 Werte

margin: 5px 10px 15px 20pxoben · rechts · unten · links4 Werte (Uhrzeigersinn)

paddingwie marginInnenabstand

border: 2px solid redBreite · Stil · FarbeRahmen

border-radius: 8px–Runde Ecken

width / height–Breite / Höhe des Contents

💡 box-sizing: border-box macht width zur Gesamtbreite (inkl. padding + border)

Erklarung

■ DEV HANDBUCH

</> HTML

{} CSS

fn() JavaScript