Box model

No. 31 · SVG · Frame jig

Drag widthclick box-sizing

A picture-frame jig: content, padding, border and margin are its nested frames. Drag the width and switch box-sizing to see which of them gives way.

Prompt

/anatomy explain the CSS box model, interactive

npm install anatomy-figures

page.tsx

import { BoxModel } from "anatomy-figures";

<BoxModel theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import BoxModel from "anatomy-figures/box-model";

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<BoxModel
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

index.html

import { define } from "anatomy-figures/element/box-model";

define();

<anatomy-box-model theme="light"></anatomy-box-model>