CSS Padding and Margin

Michael Gearon

Last updated on April 18, 2020

The most two popular CSS properties are margin and padding, they are used for spacing-out elements. Simply put the padding is the space inside something whilst the margin is the space outside of something.

Margin

The margin property defines the space around elements. Without the use of margins the elements would be right next to each other which could make a website look terrible (don’t forget about whitespace). There is four properties you can define:

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

You can also use the shorthand property to condense this:

• margin: 25px 75px 25px 110px;
  • top margin is 25px
  • right margin is 75 px
  • bottom is 25px
  • left is 110px
• margin: 25px 75px 100px
  • top margin is 25px
  • right and left margins are 75px
  • bottom margin is 100px
• margin:25px 75px
  • top and bottom margins are 25px
  • right and left are 75px
• margin:20px
  • all four sides are 20px

Where possible use the shorthand properties for better performance and readability.

Padding

The padding property defines the space inside an element. There is four properties you can define:

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

You can also use the shorthand property to condense this:

• padding: 25px 75px 25px 110px;
  • top padding is 25px
  • right padding is 75 px
  • bottom padding is 25px
  • left padding is 110px
• • padding: 25px 75px 100px
  • top padding is 25px
  • right and left padding are 75px
  • bottom padding is 100px
• • padding:25px 75px
  • top and bottom padding are 25px
  • right and left padding are 75px
• • padding:20px
  • all four sides are 20px

Where possible use the shorthand properties for better performance and readability.

What is the box model?

The box model is a combination of margins, padding and borders.

First published on April 26, 2016