Michael Gearon

CSS Padding and Margin

Michael Gearon

Last updated on

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.

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.