Not using widths & padding/margins on the same element?

Question

I've seen numerous people mentions that you shouldn't use widths and padding or margins on the same element with CSS. Why is that?

Answer 1

Because some browsers treat the width as the total width of the element including the padding and the margins, and others treat the width as the base width to which the padding and margins are added. As a result your design will look different in different browsers.

For more information, see the W3C page on Box Model and quirksmode's take.

Answer 2

I've never come across a problem caused by using width, padding and/or margin together.

So long as you have a valid DOCTYPE and are not in Quirks Mode, you will have a predictable box model and therefor should use whichever is most appropriate out of margin/padding to represent what you are trying to do.

Note: Margin applies outside of borders, padding applies inside of borders. Width means inner width of the container, the Total width = margin+border+padding+width (remembering that the first three are added for both left and right hand side).

Answer 3

Are you stating that padding and/or margin values shouldn't co-exist with a DOM element that also has a width value assigned to it? If so, that is only true if you do not want to write CSS that is compatible with both IE as well as browsers which implement web standards (e.g. Firefox). It would be difficult to achieve the layout you're looking for usually without some margin or padding value. But I suggest that you write CSS that is compatible for both browsers. If this is not what you are asking, then please correct me :)

Answer 4

The reason may be the famous box model problem.

Summary: IE renders width different then the standard rendering if padding and margin used with width or height.

Answer 5

I can think of 2 reasons:

1) the old "box model" of IE is really flaky, so when you have an element with the style { width: 300px; padding: 30px; margin: 20px;} it's outline might not actually match up to the expected 400px (300 px size, plus 2 30px padding, plus 2 20 px margin. I think its actual width would be 340, as it rolls the padding into the width calculation.

which brings is to...

2) Some people find the calculations a little confusing.

That said, I personally use widths along with padding and margins and have no problems with it. If you limit yourself to not using widths when using paddings/margins, that means you are peppering your code with a lot of non-semantic cruft. It does mean you have to be aware of what the various browsers are going to do with the element, but this is why we browsertest.

Answer 6

A lot of people still cling to notions about faulty box-models in IE and reckon that if you start messing around with element widths, padding and margins, you're going to get into trouble.

That's pretty outdated advice - assuming you're using a correct doctype, all fairly modern browsers (including IE6+) will work to the same box model, and you shouldn't really have too many issues related to it.

This being CSS, you will obviously have a million other cross-browser issues, but the infamous IE box-model is becoming a thing of the past.

Answer 7

One important point to note is that it can make using percentage widths almost impossible. Take this for example, if you want your "content" div to take the full width, but have a 10px padding:

#content {
    width: 100%;
    padding: 0 10px;
}

That works in the (sensible, but incorrect) IE model, but in standards compliant browsers your div will occupy a width of 100% + 20px which is no good. The solution is to use another "inner" container.

<div id="content">
    <div class="inner">
        content here.
    </div>
</div>

#content {
    width: 100%;
}
#content .inner {
    padding: 0 10px;
}

It's a bit annoying have the extra markup, but it makes a lot of things easier in the long run.