What is the Box Model of IE?

Question

What is the Box Model of IE, I so often see at the internet tutorials? But I never could understand it clearly.

Answer 1

It is related to the way in which Internet Explorer interprets and renders CSS, Internet Explorer does not comply 100% with CSS standards and that causes that your pages might look different depending on the browser you are using.
Do a little bit of research and you'll get the idea, to work around it you will need a little bit of practice, because almost every time might affect you differently.

Answer 2

http://www.google.com/search?hl=en&safe=off&client=firefox-a&hs=Ro2&rls=org.mozilla%3Aen-US%3Aofficial&q=IE+Box+Model+Hack&aq=f&aqi=&aql=&oq=&gs_rfai=

Answer 3

In IE 5.5 and earlier, and in later versions of IE that are rendering in Quirks mode, the padding is placed inside the content width instead of around it.

These days, just use a Standards mode triggering Doctype and don't worry about it.

Answer 4

So in standards compliant browsers the box model refers to how the browser calculates the total width of an element.

Consider the following div:

<div id="zoidberg" style="width: 100px;"></div>

Right now, in both IE and standards compliant browsers, the total width is 100 pixels. Let's say you add a left and right margin of 10 pixels to the box:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px;"></div>

Right now, in both IE and standards compliant browsers, the total width is 120 pixels (100 pixels wide, plus 10 pixels of margin on the left side). So far so good. This is where things start getting funky. Let's add a border to this boring div:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid"></div>

So now we have an awesome div with a border. Unfortunately, because of IE not following standards, the total width in IE and standards compliant browsers are different. From this point forward, the total width of IE will be 120 pixes (100 pixels wide, plus 10 pixels of margin on left and right). However, the width of the div in standards compliant browsers will be 122 pixels (100 pixels wide, 20 pixels of margin, and 2 pixels of border [1 pixel on the left side and one 1 pixel on the right side of the border.]) Are you starting to see a problem develop?

Hey, our div looks weird, the text is touching the border. Let's add some padding to it:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid; padding-left: 10px; padding-right: 10pxl"></div>

Cool, looks much better now. Again, the total width in IE is 120 (the 100 pixels of width, plus 20 pixels of margin). However, in standards compliant browsers, the total width of the box is now calculated to be 142 pixels (100 pixels of width, 20 pixels of margin, 2 pixels of border and 20 pixels of padding [10 pixels on the right side, 10 pixels on the left side.])

So to answer your question, the box model of IE is how IE calculates the total width of an element. It ignores the border and the padding and only takes margins and width into account. Standards compliant browsers calculate total width by adding the width, margin, border and padding of an element. Personally, IE's method makes way more sense, but it's not what the standard is, so we have to grumble at it.