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

Author

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

Summercool

2007-10-28, 7:19 pm

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

Safalra (Stephen Morley)

2007-10-28, 7:19 pm

On Sun, 28 Oct 2007 04:23:35 -0700, Summercool wrote:
> 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.

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

--
Safalra (Stephen Morley)

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