Laatikkomallin visualisoija

Tämä työkalu renderöi CSS-laatikkomallin sisäkkäisenä väritettynä kaaviiona (margin, border, padding, content) ja päivittää sekä visuaalisen että generoidun CSS:n kun muutat per-sivu-arvoja. Jokaisella margin/border/padding on itsenäiset ylä/oikea/ala/vasen syötteet pikseleinä, ja sisältölaatikolla on leveys ja korkeus. Klikkaamalla kerroskorttia korostaa sen renkaalla, ja kokonaisrenderöity koko lasketaan ja näytetään.

1. Muokkaa Margin-, Border- ja Padding-arvoja per sivu (px) ryhmitellyissä korteissaan. 2. Aseta Sisällön leveys ja korkeus. 3. Klikkaa mitä tahansa kerroskorttia korostaaksesi sen kerroksen kaaviossa. 4. Sisäkkäinen kaavio näyttää kokonaisulkoiset mitat, ja generoitu CSS-laatikko päivittyy live-tilassa. 5. Klikkaa Kopioi CSS-koodikortilla kopioidaksesi generoidut määrittelyt.

Tuloste käyttää `top right bottom left` -lyhennettä `margin`:lle, `border-width`:lle (with `border-style: solid;`), ja `padding`:lle, plus eksplisiittisen `width`:n ja `height`:n, ja kommentin joka näyttää kokonaisulkoisen koon. Kokonaisleveys = vasen margin + vasen border + vasen padding + sisältöleveys + oikea padding + oikea border + oikea margin (korkeus analogisesti). Kaavio on skaalattu mahtumaan, minimi-sisältökoko 60x30 px, jotta pienet laatikot pysyvät näkyvissä.