CSS Box Model Visualizer

A quick way to visualize and share CSS box model examples. Adjust the inputs in the control panel to customize margin, padding, border, element dimensions and colors.

Create a model

ASCII Example

border
 _____________
|   padding   |
| ___________ |
| |         | |
| | element | |
| |         | |
| ___________ |
|   margin    |
|_____________|

Buttom Model Example

Card Model Example

Heading Model Example

Run local server

yarn install
gatsby develop