W3C box and IE box model, w3c box ie

W3C box and IE box model, w3c box ie

Box Model:

Content, padding, margin, and border)

The content section of IE calculates border and padding.

Example: A box

Margin is 20px, border is 1px, padding is 10px,

The content width is 200px and the height is 50px,

Standard w3c box model:

Occupied position: content + padding + border (margin );

Occupied position: 20*2 + 1*2 + 10*2 + 200 = 262px, 20*2 + 1*2*10*2 + 50 = pixel PX;

Actual box size: content + padding + border (border );

The actual size of the box is: 1X2 + 10x2 + 200 = 222px, 1X2 + 10x2 + 50 = 72px;

Ie box model:

Occupied location: content + boundary (margin );

Occupied position: 20*2 + 200 = 240px, 20*2 + 50 = 70px,

Actual size of the box: content );

The actual size of the box is 200px in width and 50px in height.

Details: http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html