How do I control my margin vs. padding? Is there any other way to get around using the “child” element hack?

Posted February 25, 2005

As I have been writing more and more CSS, I have found that the best rule of thumb is that when placement is concerned, do not use any sort of padding-left, or padding-right in Internet Explorer. When I use padding for top and bottom, that doesn’t affect things too much, but because IE adds all padding values to the actual size of a table cell, or div, it is unpredictable at best.

But even when I use margin to add space to the left and right of an element, I have problems with that measurement being consistent between browser types. As a result, I have a bunch of ugly child element hacks that look something like this;

div.mainContent{
margin-left:20px;
}

/* This hack will re-set the margin left in Mozilla browsers */

body > div.mainContent{
margin-left:10px;
}

This is the problem I am having. It is stupid extra code, and if a different user comes in later to use this stylesheet, they may have no idea without lengthy, code bloating comments on what this specific hack is all about.

So, what I should have done from the start when creating placement for elements was to use relative placement. Relative placement mean, in relation to, and seems to be consistent across browser, even old ones. So for this previous example, I would use this code instead;

div.mainContent{
width:200px;
position:relative;
top:10px;
left:20px;
}

When using Relative positioning, you can use any of these value pairs, top, left, bottom, and right. But I think you will find that you will use top and left the most.

From here on out, I am going to stay away from using Margin for positioning and use this instead.