Boxmodell-visualiserare

Det här verktyget ritar CSS-boxmodellen som ett kapslat, färgat diagram (margin, border, padding, content) och uppdaterar både visualiseringen och den genererade CSS-koden när du ändrar värden per sida. Var och en av margin/border/padding har oberoende fält för top/right/bottom/left i pixlar, och content-rutan har width och height. När du klickar på ett lagerkort markeras lagret med en ring, och den totala renderade storleken beräknas och visas.

1. Redigera Margin-, Border- och Padding-värdena per sida (i px) i deras grupperade kort. 2. Ange Content width och height. 3. Klicka på valfritt lagerkort för att markera lagret i diagrammet. 4. Det kapslade diagrammet visar de totala yttre måtten, och den genererade CSS-boxen uppdateras live. 5. Klicka på Kopiera på CSS Code-kortet för att kopiera de genererade deklarationerna.

Utdata använder stenografin `top right bottom left` för `margin`, `border-width` (med `border-style: solid;`) och `padding`, plus explicit `width` och `height` och en kommentar som visar den totala yttre storleken. Total bredd = vänster marginal + vänster ram + vänster padding + content-bredd + höger padding + höger ram + höger marginal (höjd analogt). Diagrammet skalas för att passa, med en minimistorlek på 60x30 px för content-rutan så att mycket små rutor förblir synliga.