Margins versus Padding in CSS

You can add whitespace to your HTML elements by either adding a MARGIN or PADDING. In many circumstances, it doesn't matter which you use and, unfortunately, there is a standards compliant definition and an Internet Explorer deviation.

PADDING

Consider you have a DIV tag whose width you specify to be 100 pixels. Then you go on to specify a padding of 10 pixels on the left and 10 pixels on the right. You now have effectively 80 pixels of space to play with inside of this DIV tag ( 100 - 10 - 10 = 80 pixels ).

MARGIN - in standards compliant web browsers

Reconsider the 100 pixel wide DIV tag. Now suppose you give it a background color and a 10 pixel margin all the way around. We still have the padding set at 10 pixels on the left and 10 pixels on the right. What you'll see is 80 pixels of horizontal space to play with surrounded by a background color. The background color will extend 10 pixels to the left and 10 pixels to the right to a total of 100 pixels. If you have any text around the DIV tag, it will be pushed away by 10 pixels of whitespace from the margin definition.

MARGIN - in Internet Explorer

In standards compliant browsers, the MARGIN definition happens outside of the width you give to the HTML element. In IE; however, you must extend the width of the HTML element to include the width of the margin. So if we are to use the above example and have it show correctly in Internet Explorer, we must change the DIV tag's width from 100 pixels to 120 pixels. That is 100 pixels for the box plus 10 pixels on each side for the margin.

Cross Browser Margins

It may seem that it is impossible to create margins that show properly on all browsers. At first glance, this appears to be the case, but we can employ a hack using the asterisk symbol that only IE understands. We can define a chain of encapsulating elements, starting with the * and then HTML and then our class definition. Because only Internet Explorer understands the asterisk symbol, it is the only browser that will listen to that particular definition. See the code below:

.marginFun
{
    width: 100px;
    padding: 10px;
    margin: 10px;
    background: gray;
}

/* IE asterisk hack */
* html .marginFun
{
    width: 120px;
}

The reason this works is called the rule of specificity. It means that the longest chain is considered the most specific. When two or more CSS definitions overlap, the more specific one wins. For most web browsers, the first ".marginFun" definition is the ONLY definition they process. For IE, it will process both ".marginFun" definitions but let the "* html .marginFun" definition win out when it comes to determining how wide to make the element.

A Clockwise Mnemonic

Both the padding and margin definitions allow you to specify the top, right, bottom, and left whitespace values. It goes exactly in that order like the motion of a clock hand (top, right, bottom, left). So for example: margin: 10px 20px 10px 20px; would put a margin of 10 pixels on the top and bottom but a margin of 20 pixels on the left and right.

If you specify just one length value, it will be applied to all for sides. So the following margin: 10px; would put a margin of 10 pixels on all four sides.

If you specify two length values, the first applies to the top-bottom sides and the second applies to the left-right sides. So margin: 10px 20px; would put a margin of 10 pixels on the top and bottom but a margin of 20 pixels on the left and right.

If you specify a length value for the top-bottom and then "auto" for the left-right, it will center the element. So the following margin: 10px auto; will center the element horizontally.