What's the relationship between margin, padding and width in different browsers?

Question

CSS width value = display width of inside?

or

CSS width value = display width of inside + CSS margin-left + CSS margin-right?

Answer 1

You have to make yourself familiar with the CSS Box Model. It explains where padding, margin and border as well as width work.

However do note that different browsers implement this differently: most notably, Internet Explorer has a box model bug (this is infamously present in IE6 -- I am not aware if this has been fixed in IE7 or IE8) that caused the infamous "quirks mode" CSS hack.

Briefly stated, Internet Explorer set their box model to include padding in computing the width, as opposed the official standard wherein width should only constitute the content.

Answer 2

It not only depends from the browser and version you choose, but also from the doctype of your html document. Internet explorer in "quirks mode" is for example completely different from Internet explorer with doctype XHTML 1.0 Transitional.

Answer 3

As mentioned by others, the rule of thumb is the CSS box model. This works generally as advertised by browsers such as Opera, Firefox & Safari. Internet Explorer is your exception, where the "width" includes the margins, padding and borders.

There are some great tools out there that visually depict how the browser has rendered the content. For Firefox check out Firebug and for Internet Explorer check out the Developer Toolbar.

Answer 4

Here you can see an animated diagram which "explodes" the box.

Answer 5

I think IE before version 6 incorrectly included borders and padding in width and height. See: Microsoft Admits IE 5 is Messed Up