Michael Gearon

UX Designer at BrandContent

CSS Padding and Margin

Written by Michael Gearon on the April 26, 2016

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:

You can also use the shorthand property to condense this:

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:

You can also use the shorthand property to condense this:

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.


About Michael Gearon

Mike is a product designer at GoCompare


Have an idea? Get in touch