Skip to content

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.

License

Notifications You must be signed in to change notification settings

Martskin/box-model-visualizer

Repository files navigation

CSS Box Model Visualizer 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.

CSS Box-model Visualizer

Create a model

ASCII Example

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

Buttom Model Example

Buttom Model Example

Card Model Example

Card Model Example

Heading Model Example

Heading Model Example

Run local server

yarn install
gatsby develop

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published