The box model determines how the size of content of element is determined in conjunction with its padding and border. Most browsers other then Internet Explorer (IE) support W3C Box Model, Whereas IE can use either model depending upon whether the page is being rendered in strict mode or quirks mode. Which mode is used depends upon the DOCTYPE.
- Pages with a valid and recognized DOCTYPE declaration are rendered in strict mode.
- Pages lacking a DOCTYPE declaration or those containing an unrecognized are rendered in quirks mode.
Let’s have an element with following applied style:
{
Width: 180px;
Height: 72px;
Padding: 10px;
Border-width: 5px;
}
The box will be display in different model as shoe in below diagram:
Hence width and height of box models will be as :
| Model Name | Width | Height |
| W3C Box Model | (180+2*10+2*5)px= 210px | (72+2*10+2*5)px=102px |
| Internet Explore box model | (150+2*10+2*5)px= 180px | (42+2*10+2*5)px=72px |
If you have questions related to this blog just write your thoughts.
Quirks mode and strict mode:
http://www.quirksmode.org/css/quirksmode.html
Thanks for reading!
Rukhsar Ahmad
