CSS cheatsheet for margins, borders, and padding

When using CSS and “the box model”, there are several pieces that need to be looked at. Let’s start with a picture for reference.

source: https://www.w3schools.com/css/css_boxmodel.asp

Content

Content is where images and text appear.

Padding

The padding is the area directly outside of the content and is transparent. It is used to create space around the content. The length of the padding can be the same on all four sides by using the ‘padding’ property. If different lengths are needed for different sides, you can use:

•padding-top
•padding-right
•padding-bottom
•padding-left

If different sides will have different lengths, you would write it using the order shown above (If any sides will have no padding, use 0). Here are some examples of using shorthand rather than listing every property on a separate line:

syntax example — padding: ‘top/bottom’ ‘right/left’
padding: 20px 50px

syntax example — padding: ‘top’ ‘right’ ‘bottom’ ‘left’
padding: 5px 10px 0px 10px

Border

The border can be solid, dashed, or have other styling. Here is a picture with examples of border styles:

source: https://www.w3schools.com/css/css_border.asp

Margin

The margin is the area directly outside of the border and is transparent. The margin is used to create space outside of the border.

Margin properties are similar to padding properties. If different lengths are needed for different sides, you can use:

•margin-top
•margin-right
•margin-bottom
•margin-left

If different sides will have different lengths, you would write it using the order shown above (If any sides will have no margin, use 0). Here are some examples of using shorthand rather than listing every property on a separate line:

syntax example — margin: ‘top/bottom’ ‘right/left’
margin: 20px 50px

syntax example — margin: ‘top’ ‘right’ ‘bottom’ ‘left’
margin: 5px 10px 0px 10px