Tessisamess

Margin vs Padding: How to use them!




So you're having trouble with the difference between margin and padding? No worries!

Margin and padding can be confusing; they're similar but not the same, so it's easy to get turned around and wind up with unexpected results. In this tutorial we'll go through the basics of margin and padding, what they're for, and how to use them. This is a CSS basic, so it's pretty vital to your designs, but it's also pretty simple once you get the hang of it. This tutorial won't be overly long, so let's jump right in!

What is margin?

Your margin is the space around an element. This means it is outside of that element and is not a direct part of it, so things like borders and backgrounds won't effect it. Negative values are allowed.
This element has a margin of 50px and no padding

What is padding?

Your padding is the space around an element's content. This means it is inside of that element and will take on the background color of that element, and things like borders will sit outside of that padding. Negative values are not allowed.

This element has a padding of 50px and no margin


Cool! But... how do I use them?

With margin and padding you can define the amount of space with px, em, %, vh, vw, pt, cm, etc.

You can use negative values with margins whereas you cannot with padding. You can also use auto with margins, which will horizontally center an element, but will not vertically center it. margin:0 auto; is the simplest way to center content on a page, and is a value you will commonly see in stylesheets.

There are a few ways to set your padding and margin. These specifications will work for either margin or padding, so you can swap out "margin" for "padding" in any of these and it will be the right way to write it:

Setting each side individually:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Setting it with shorthand:
Shorthand saves space, time, and generally looks nicer, but ordering does matter, so keep that in mind!

margin:
10px;
will set all four margins to 10px

margin:
10px 20px;
will set the top and bottom to 10px and the left and right to 20px

margin:
10px 20px 30px;
will set the top to 10px, the left and right to 20px, and the bottom to 30px

margin:
10px 20px 10px 20px;
will set the top to 10px, the right to 20px, the bottom to 10px, and the left to 20px


Let's see it in action!

Here we have a simple example of three divs that all have a margin of 50px and a padding of 40px.

Notice how the padding fills out all four sides of the div around its content, while the margin spaces things at an even 50px rather than doubling up where the margins meet each other. If two elements with margin:50px; sit next to each other the meeting margins will not double to equal 100px. They will halve to make a total of 50px instead, ensuring the amount of space you want between elements is correct.
Div #1
Div #2
Div #3
Let's take a look at two more examples!

This div has a width of 65%, a padding of 40px, and a margin of 50px auto
This div has a padding of 70px 30px, and a margin of 40px 90px

♡ You're Done! ♡

Tags:

Comments

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.