padding and margin BOTH add to the div's width and height

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Summercool - 28 Oct 2007 12:23 GMT

i never knew that when we specify

style="width: 600px; padding: 100px; margin: 80px; border-width: 60px"

all the padding, margin, and border ADD TO the 600px...
so the whole area essentially becomes 600px + (100 + 80 + 60) x 2 =
1080px

at first I thought the padding goes inside the width of 600px and
makes the area inside for display only 400px.

an example is at

http://www.0011.com/test_size3.html

Reply to this Message

Safalra (Stephen Morley) - 28 Oct 2007 13:19 GMT

> i never knew that when we specify
>
[quoted text clipped - 6 lines]
> at first I thought the padding goes inside the width of 600px and
> makes the area inside for display only 400px.

Under the traditional box model, padding does go 'inside the width'. In
quirks mode Internet Explorer uses the traditional box model. Other
browsers, and Internet Explorer in strict mode, use the W3C box model. See
here for more details:

http://www.quirksmode.org/css/box.html

Signature

Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/css/white-space-property/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007

padding and margin BOTH add to the div's width and height