CSS Box Model Cheatsheet

Box Model Layers

Layer Indicator Explanation
Margin The cleared area outside the Border of the element. Completely transparent, and used to space elements from each other.
Border A line or styled line that goes around the Padding and Content. Used to make elements more concise and focused.
Padding The cleared area around the Content, while still being within the Border. Used to give space between the Border and other elements without needing to change Margins.
Content The actual Content of the box, where the text and images of the element appear.
Note: The total width and total height of an element changes based on the element's box. Make sure to add the left/right border, padding, and margin sizes when calculating the element's width, and top/bottom border, padding, and margin sizes for the element's height.

Box Model CSS Example Code

Layer Examples Notes
Margin margin: 10px 5px 15px 20px; margin: 10px 5px 15px; margin: 10px 5px; margin: 10px;
  • If there are four elements, the spacing goes clockwise from the top margin (top, right, bottom, left).
  • If there are three elements, the first input is the top margin, followed by both the right and left margins, and then the bottom margin.
  • If there are two elements, the top and bottom margins are the first input, and the left and right margins are the second input.
  • If there is only one element, then all four margins share the input.
  • Margin by itself is the shorthand version, you can adjust the individual ones by using margin-top, margin-right, margin-bottom, and margin-left.
Border border: 5px solid red;
  • The first element represents the thickness of the border.
  • The second element represents the type of border used. Other examples are: dotted, dashed, double, and hidden.
  • The third element represents the color of the border.
Padding padding: 10px 5px 15px 20px; padding: 10px 5px 15px; padding: 10px 5px; padding: 10px; The order and properties of the shorthand Padding property is the same as Margin. The individual properties are padding-top, padding-right, padding-bottom, and padding-left.