Padding vs Margin for Web Design Spacing

spacing web design

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:

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

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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
5 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Anthony
Anthony
8 years ago

No offense man but this article is pretty lousy. I had to double take, it appears as if the article just cuts off suddenly…because you didn’t even cover the basics of effective margin/padding implementation. You’re not going to get anywhere with this blogspam.

Bob
Bob
3 years ago
Reply to  Anthony

Agree

Bob
Bob
3 years ago

This Didn’t help me at all

Serge Moulin
Serge Moulin
3 years ago

Me neither, but its still number one in my googlesearch for ‘spacing in webdesign’. wonder who is doing something about that

mikall
3 years ago

We have an updated, more detailed blog post that might be of interest.  Check it out [url=https://www.ostraining.com/blog/coding/back-to-the-basics-padding-and-margin/]here[/url].

5
0
Would love your thoughts, please comment.x
()
x