Padding vs Margin for Web Design Spacing

Spacing 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:

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

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:

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:

Are you interested in learning more about padding and margins? We have a Back to Basics: HTML Padding and Margins tutorial that will help you.