This is a beginner tutorial, if you’re familiar with margin and padding you might want to skip this one.
We love getting emails from you guys with all sorts of interesting questions and ideas and one recurring question that we’ve received many times is “what is the difference between margin and padding”? This guide will answer that.
For the person what is new to web design when using margin and or padding, the end result might look exactly the same = the end result being space between things on a web page. However it is more elegant than that.
To get more of an understanding, we’ve created the Ultimate Guide To Padding VS Margin below.
The best way to absorb this guide is to stop reading once you “get it”. Below we try and explain the concept of Margin / Padding in different ways, so once you understand the difference feel free to stop reading and go play video games.
Ready? Hope so! Keep on reading and get ready to become a rock☆ of spacing around web elements (if such a thing exists?).
The Simple Explanation
We like to keep things simple around here, so let’s start by summing it up in one sentence:
Padding is the space between the web element (text, image, buttons, etc…) and the border of that element, whereas Margin is the space outside the border of that element. In other words think of padding like the space between your dining room table and wall (the border) and margin like your yard which is between you and your neighbor’s house
So what that means in visual terms is this:
Notice how the margin is on the OUTSIDE of the button, but padding is on the INSIDE of the button?
Need more? Let’s look at some examples of Margin VS Padding to see how it affects certain elements.
WDA Navigation Menu Example of Margin VS Padding
Sometimes the best way to grasp something is to look at real world examples. Let’s start with our site, WebDesignersAcademy.com. If you take a look at the top of this page, you’ll see the navigation bar. Let’s break down a menu entry. How about the Toolkit menu entry:
So what is padding and what is margin here?
What do you think?
Remember that padding is the space between the web element (text, image, buttons, etc…) and the border of that element, so the padding here (for conversation purposes) is this:
So then what is the margin of the menu entry?
Well, there doesn’t seem to be any margin right? Since the navigation menu items touch one another on the left and right side… so at least on those sides there is 0 margin.
More Examples From Popular Websites
Let’s take a look at more examples of padding VS margin from other websites that you probably visit on your way around the Internets.
From Yahoo’s homepage…
From eBay auction…
From Google’s search box…
Padding VS Margin Video
We were going to create a fancy video showing you all about margin vs padding, but then we found the video below from YouTube user HowToBlogDesign and realized that we could not have done a better job, so check this out:
Do You Get It?
Hope so! If not, reread this page and try experimenting on your own website by adding margin and padding to elements and see what happens.
Hope we were able to help!
Ian & Amy Anderson