Browser Differences: Width Padding Margin Differences
Summary
This page tries to simply explain these differences so that you can build webpages that are both compliant and render correctly in Internet Explorer. Internet Explorer treats the "width" and "height" to define the size of the content, padding and border area combined. To make a webpage that renders the same in all browsers specify any "width" and "height" in the element that contains the text/image content, and have a separate wrapper to handle any "margin" and "padding". Margin is never included in a defined "width" and "height" region; it defines the gap to leave between elements.Internet Explorer takes "width" and "height" to be the total area including padding and border.Firefox, Opera, Safari, SeaMonkey and othercompliant browsers take "width" and "height" to define just the text/image content area. Withcompliant browsers, padding and border are outside the defined "width" and "height" region.If you are having problems with:move "margin" and "padding" to a separate wrapper:depending in your project you may want to search the web for "X-UA-Compatible" which can go in a head meta tag.