Padding vs Margin for Web Design Spacing

| Web Design

spacing web designSpacing is important for web design.

Spacing is about giving every piece of content its own space on the screen. We use margin and padding to keep content separated from other elements such as images, video embeds and text.

Good spacing isn't often noticed. Butyoureallynoticespacingwhenitisbadlydone.

An examples of spacing

Let’s see an example of design with good spacing:

web design padding

Now, in example below we can see the same design without spacing:

web design spacing padding

By removing spacing, the content is still readable but looks unprofessional and disorganised.

Padding or Margin

In CSS, the two properties that makes spacing possible are padding and margin.

  • The padding represents the inner space of an element
  • The margin is external

In this example, padding and margin are shown around the black border:

web design spacing padding margin

Using Left Margin to separate columns

It is not always necessary or useful to set a global margin. When web designers use columns, the regular practice is to use only the right margin to separate the columns from each other. This example shows the margin that we use to separate the columns:

web design spacing margin left

Learn how to add spacing with CSS

Are you interested in learning about padding and margin? We have a class that will help you to start.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.