CSS Box Model Cheat Sheet
By Web Dev Simplified https://courses.webdevsimplified.com
Margin
Border
Padding
Content
Padding
The space between the content and the border of an element
Set the padding on all sides
padding: 5px Set the padding to 5px on all sides
Set the padding on the horizontal and vertical axis
padding: 5px 3px Set the padding to 5px on the top and bottom and 3px on the left and right
Set the padding on the top side, horizontal axis, and bottom side
padding: 5px 2px 3px Set the padding to 5px on the top, 2px on the left and right, and 3px on the bottom
Set the padding on the top, right, bottom, and left
padding: 5px 2px 3px 1px Set the padding to 5px on the top, 2px on the right, 3px on the bottom, and 1px on the left
Set the padding on the top
padding-top: 5px Set the padding to 5px on the top
Set the padding on the right
padding-right: 2px Set the padding to 2px on the right
Set the padding on the bottom
padding-bottom: 3px Set the padding to 3px on the bottom
Set the padding on the left
padding-left: 1px Set the padding to 1px on the left
Border
The divider between the padding of an element and its margin
Set the border-width, border-style, and border-color
d : 5px
bor er sol id a
bl ck Set the border to a 5px wide solid black line
Set the border line width
d
bor er-w idth: 3px Set the border width to 3px
Set the border line style
d
bor er-style : dashed Set the border style to a dashed line
Set the border line color
d
bor er-color : re d Set the border line color to red
Margin
The space between two different elements
The margin of elements can collapse meaning only the largest margin will be used to space out elements
Set the margin on all sides
margin: 5px Set the margin to 5px on all sides
Set the margin on the horizontal and vertical axis
margin: 5px 3px Set the margin to 5px on the top and bottom and 3px on the left and right
Set the margin on the top side, horizontal axis, and bottom side
margin: 5px 2px 3px Set the margin to 5px on the top, 2px on the left and right, and 3px on the bottom
Set the margin on the top, right, bottom, and left
margin: 5px 2px 3px 1px Set the margin to 5px on the top, 2px on the right, 3px on the bottom, and 1px on the left
Set the margin on the top
margin-top: 5px Set the margin to 5px on the top
Set the margin on the right
margin-right: 2px Set the margin to 2px on the right
b
margin- ottom: 3px
Set the margin on the bottom
Set the margin to 3px on the bottom
margin- left: 1px
Set the margin on the left
Set the margin to 1px on the left
Box Sizing
Determines how the size of the content of an element is calculated when a width/height is given
The width and height properties of an element specify the exact size of the
content of the element and do not include the border, padding, or margin
box-sizing: content-box This is the default value in CSS. If an element has a width of 50px and a padding of 10px on all sides
then the element will be a total of 70px (50px from the content width and 10px from both the left
and right side padding ). This is somewhat conterintuitive which is why I generally recommend not
using content-box.
The width and height properties of an element contain the content,
padding, and border, but not the margin.
box-sizing: border-box If an element has a width of 50px and a padding of 10px on all sides then the element will be a total
of 50px. The content portion of the element will only be 30px wide, though, since that is the
remaining space after the 10px of padding are applied to This makes sizing elements much easier
which is why I generally recommend always using border-box.
Display
Determines how an element is laid out on a page
Elements will span the entire width of their container and begin on a new
display: block line after the previo us content
Block elements by default will be on their own line and push everything else onto the next line. Block
elements also can have a specific width or height set.
Elements will take up only the amount of space needed to fit the content
display: l
in in e inside them
Inline elements by default will not take up any more space than they need to. Inline elements also
cannot have a specific width or height set since their size is based on the size of the content in them.
Elements will take up only the amount of space needed to fit the content
display: l
in in - e block inside them, b ut a manual width or height can be set
Inline block elements by default will not take up any more space than they need to. Inline block
elements also can have a specific width or height set which overrides the default size of the element.
