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.
![CSS Box-model Visualizer](https://user-images.githubusercontent.com/3717760/63387735-15ff3d80-c35b-11e9-993c-2b23d4d6cbcf.png)
border
_____________
| padding |
| ___________ |
| | | |
| | element | |
| | | |
| ___________ |
| margin |
|_____________|
![Buttom Model Example](https://user-images.githubusercontent.com/3717760/63553872-a6bb5200-c4f0-11e9-9e9a-ed6eec185f0a.png)
![Card Model Example](https://user-images.githubusercontent.com/3717760/63553873-a6bb5200-c4f0-11e9-93c2-3e56a7574867.png)
![Heading Model Example](https://user-images.githubusercontent.com/3717760/63553874-a6bb5200-c4f0-11e9-8dab-e6514a9f17d9.png)
yarn install
gatsby develop