Box
Box description.
Props
Box properties
Property | Description | Type | Default | Version |
---|---|---|---|---|
center | Should the children of the box be centered? | boolean | false | |
bg | Set box background color | string | ||
debug | Highlight box on the screen, useful for debug purposes | boolean | false | |
width | What width should the box be? | string , number | ||
height | Set the box height | string , number | ||
pt | Set box top padding | number | ||
pb | Set box bottom padding | number | ||
pl | Set box left padding | number | ||
pr | Set box right padding | number | ||
px | Set box padding on the horizontal axis | number | ||
py | Set box padding on the vertical axis | number | ||
pd | Set box padding on the both axis | number | ||
mt | Set box top margin | number | ||
mb | Set box bottom margin | number | ||
ml | Set box left margin | number | ||
mr | Set box right margin | number | ||
mx | Set box margin on the horizontal axis | number | ||
my | Set box margin on the vertical axis | number | ||
mg | Set box margin on the both axis | number | ||
overflow | Set the box overflow | visible hidden scroll scrollX scrollY auto | auto | |
position | Set box position | static absolute relative fixed | - | |
role | Set the box ARIA role | article aside details div figcaption figure footer and more | auto |
Usage
Basic Box
Dark Mode
camara.space
Center
Dark Mode 
camara.space
Debug
Dark Mode
camara.space
Padding
Top, Bottom, Left and Right Padding
Dark Mode
camara.space
Horizontal and Vertical Padding
Dark Mode
camara.space
Margin
Top, Bottom, Left and Right Margin
Dark Mode
camara.space
Horizontal and Vertical Margin
Dark Mode
camara.space