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