I have to admit, when I first started into the world of CSS development, I was confused at the difference, and proper use of Margins and Padding. However, for my print design friends, particularly those that use InDesign, you may want to think of Margins as the runaround, and the Padding as the text inset.

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there is a difference.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

An element can have equal margins on all sides of it, which is simply written as:

element { margin: 5px; }

This gives an equal 5px to every side of an element. Elements can have any combination of margins, and it can be written to define it in a string, or can be address a specific side:

element { margin: 5px 10px 2px 4px; } /*margin: Top, Right, Bottom, Left*/
element { margin-left: 4px; margin-right: 10px; margin-top: 5px; margin-bottom: 2px; }

There are a few IE issues with margins that probably cause most of all IE layout problems.

• Double margins – The double margin bug in IE6 is probably the hardest bug developers struggle with. If any element is floated and has a margin in the same direction, IE6 will double that margin. So if you have an element that is floated left and also has a margin of 5px to the left, IE6 will give it a left margin of 10px.
• Bottom margins – All IE versions like to ignore bottom margins, so it’s better to use padding for bottom spacing instead.

What is Padding?

Like margins, padding is the space around an element. However unlike margins, which deal with the space around the outside of an element, padding effects the space inside the element, but in a strange way discussed below.

Padding can can be written in a similar way as margins in your CSS:

element { padding: 10px; }
element { padding: 5px 10px 2px 4px; } /*padding: Top, Right, Bottom, Left*/
element { padding-left: 4px; padding-right: 10px; padding-top: 5px; padding-bottom: 2px; }

The way padding is handled in the browser is called the box model. IE6+ (in standards mode), Firefox, Safari and Chrome all handle the calculations of padding the same.

So how does the box model and padding work? Let’s say the element below is 100px in width and height.

If you give the element an equal padding of 10px because you don't want the text touching the edges of the element, the padding didn’t push the text inside the element, it just made the element itself bigger!

This is where the idea of the box model comes in. Adding 10px of padding to an 100px element will increase it’s dimensions to 120px. (100px element + 10px top + 10px bottom = 120px).

So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 80px in height and width. Then our element would look like:

Unlike margins, an element with padding does not need to be floated or positioned relatively for it to work, if it’s dealing with padding on the inside of the element. However, if you’re using padding to move the element (or another element around it), it does need to be floated or positioned.