The Difference Between Margin And Padding

When messing around in the CSS of your blog’s theme or a website, you will most likely run into settings for margin and padding. While the 2 of these do somewhat similar effects, the way that they handle things is slightly different, in the end all that margins and padding does is separate content from other content.

Margin

A margin is used to separate content OUTWARD from the border of the element such as a DIV. So looking at the example code

#div1 {

margin: 10px;     <— Sets a margin of 10 pixels around the entire element

}

If you had a layout of your website, there would be a 10 pixel space in between the element with an ID of div1 and surrounding elements. Rememeber, you can also set each border’s margin by using the following code

margin: 10px 5px 10px 5px;

This would set a top and bottom margin of 10 pixels on the element and a 5 pixel border along the left and right sides of the element.

Padding

Now I will admit that padding has screwed me up quite a number of times when modifying a blog theme or developing my own website. The mechanics of it are different from margin because padding actually changes the size of the element. Take a look at the following code

#div1 {

width: 200px;

padding: 5px;

}

You can probably guess what width does or at least you should be able to. We can see that there is a padding of 5 pixels set. Padding deals with the area BETWEEN the content itself and the border of the element. So, instead of separating other elements 5 pixels away instead they will remain just as close but the content inside of the element will move inward. The content inside of the element with an ID of div1 will be 5 pixels from the top, right, bottom and left borders of that element.

This is where it can get tricky as I mentioned before that padding actually modifies the size of the element. Considering we used a padding of 5 pixels the actual real width of our element would be 210 pixels because it adds 5 pixels to the left hand side and 5 pixels to the right hand side. Margin would have just moved elements 5 pixels away from the outside and the element would still be only 200 pixels wide.

So then why would you use both margin and padding or use one over the other? It all depends on how you are going to have your site or blog setup and the look that you want to achieve. As an example, if you wanted to set a border around the element with an ID of div1 you would use

#div1 {

border: solid 1px black;

}

Maybe you decide to do the same to another element by adding a border to it as well but you find out that the borders are too close and you want to separate them. This is where margin would come in and you would use that to separate them.

However, you may decide that the content itself is too close to the border and this is where you would use padding. Remember though, if you use padding you have to take into account that it will alter the width and height of the element if you have a width, height or both set.