Webbers Corner

IE works slightly diffently with padding and margins compared to other browsers, this is the one case where you should always keep IE in mind before other browsers, as this is often the key reason why things go wrong in IE.

IE, instead of measing just the width of the content, takes the width property as the sum of the width of the content, padding and borders. This actually makes alot of sense because in the real world boxes have a fixed size and the padding goes on the inside. The more padding you add, the less room there would be for the content.

Below is an image which shows this.


The width of you object is actually 60px, but the padding is added to that, so 5px on either side is added, and thus the apeared width is 70px. but this is if there isn't a border involved. the border width is also added to the total width of the 'box'. Now the margin, can be seen as an invisable barrier and it will push the box away from everything if it trys to go inside the the margin. hehe a nice way to think about it i think.

This was just a quick one, so i probs said something wrong. so please correct me if you feel i made a mistake.

nice tut.

Also something else to add is when you add a border that also adds to your total.

So if you have an object that is 100px and you add a 2px border all the way round it increases the height by 4 and the width by 4 so it would be 104px.

yes, indeed, well spotted.

nice tutorial.It is much clearer now

IE can set padding either way.

First it is as Gaz described, a width: 100px for a div has an overall width plus margins but padding and borders are inside the box, squeezing up text, etc. This is called quirks mode and exists if you do not have a Doctype at the top of your html page.

If you have a Doctype above the html tag the overall width is width: 100px plus padding, borders and margins so it is like Firefox.

I think IE gave in to pressure from lots of designers and people setting web standards.

It seems more logical to have padding inside the box because then you have margins outside and padding inside whereas now you have padding and margins outside so there is little difference between them.

However, if you have something with fixed dimensions like an image inside a div and then fiddle with padding or borders in a stylesheet, if padding and borders are inside the box you can easily find that accidentally you have not left enough room for an image on some distant page, so they must have decided it was better to have everything added on the outside where margins were already expanding the width.

Most people now include a Doctype so there is no difference between IE and other browsers.

You can see the differences between IE and Firefox with a Doctype in item 6 here:-
http://www.wickham43.supanet.com/tutoria...ml#padding

and without a Doctype here:-
http://www.wickham43.supanet.com/tutoria...ctype.html

There are more differences without a Doctype in IE than just padding and borders; it doesn't obey certain styles.