Box Model Visualizer

Dette verktøyet tegner CSS-boksmodellen som et nestet fargekodet diagram (margin, border, padding, content) og oppdaterer både visualiseringen og den genererte CSS-en når du endrer verdiene per side. Hver av margin/border/padding har uavhengige topp/høyre/bunn/venstre-felt i piksler, og innholdsboksen har bredde og høyde. Ved å klikke på et lag-kort markeres det med en ring, og den totale gjengitte størrelsen beregnes og vises.

1. Rediger Margin-, Border- og Padding-verdier per side (i px) i de grupperte kortene. 2. Angi Content-bredde og -høyde. 3. Klikk på et lag-kort for å markere laget i diagrammet. 4. Det nestede diagrammet viser totale ytre dimensjoner, og den genererte CSS-boksen oppdateres sanntid. 5. Klikk Kopier på CSS Code-kortet for å kopiere de genererte deklarasjonene.

Utdataen bruker `top right bottom left`-kortformen for `margin`, `border-width` (med `border-style: solid;`) og `padding`, pluss eksplisitt `width` og `height`, og en kommentar som viser den totale ytre størrelsen. Total bredde = venstre margin + venstre border + venstre padding + innholdsbredde + høyre padding + høyre border + høyre margin (tilsvarende for høyde). Diagrammet skaleres for å passe, med en minimum innholdsstørrelse på 60x30 px slik at bittesmå bokser forblir synlige.