Box

Box description.


Props

Box properties

PropertyDescriptionTypeDefaultVersion
centerShould the children of the box be centered?booleanfalse
bgSet box background colorstring
debugHighlight box on the screen, useful for debug purposesbooleanfalse
widthWhat width should the box be?string, number
heightSet the box heightstring, number
ptSet box top paddingnumber
pbSet box bottom paddingnumber
plSet box left paddingnumber
prSet box right paddingnumber
pxSet box padding on the horizontal axisnumber
pySet box padding on the vertical axisnumber
pdSet box padding on the both axisnumber
mtSet box top marginnumber
mbSet box bottom marginnumber
mlSet box left marginnumber
mrSet box right marginnumber
mxSet box margin on the horizontal axisnumber
mySet box margin on the vertical axisnumber
mgSet box margin on the both axisnumber
overflowSet the box overflowvisible hidden scroll scrollX scrollY autoauto
positionSet box positionstatic absolute relative fixed-
roleSet the box ARIA rolearticle aside details div figcaption figure footer and moreauto

Usage

Basic Box

Center

Debug

Padding

Top, Bottom, Left and Right Padding

Horizontal and Vertical Padding

Margin

Top, Bottom, Left and Right Margin

Horizontal and Vertical Margin