Box Model-visualisering

Dette værktøj viser CSS-boxmodellen som en indbygget, farget diagram (margin, border, padding, content) og opdaterer både det visuelle afbildelsen og den genererede CSS, når du ændrer værdierne for hver side. Hver af margin/border/padding har uafhængige indstillinger for top/right/bottom/left i piksler, og content-boxen har bredde og højde. Ved at klikke på en lagkort lyser det op med en ring, og den totale visuelle storlek beregnes og vises.

1. Redigér værdier for margin, border og padding per side (i px) i deres grupperede kort. 2. Stil din contentes bredde og højde. 3. Klik på et af lagkortene for at highlighte det lag i diagrammet. 4. Det indbyggede diagram viser de totale ydre dimensoner, og den genererede CSS-box opdateres i realtid. 5. Klik på Kopier på CSS-koden-kortet for at kopiere de genererede deklarationer.

Output anvender `top right bottom left` som skrætnavn for `margin`, `border-width` (med `border-style: solid;`) og `padding`, samt eksplisite `width` og `height`, samt en kommentar som viser den totale ydre storleken. Total bredde = venstre margin + venstre border + venstre padding + indholdsbredde + højre padding + højre border + højre margin (højden på samme måde). Diagrammet skales til at passere, med en minimumindholdsstørrelse på 60x30 px så små boxer forbliver synlige.