Borders

When adding a border to a div with CSS, where does it's pixels exist in
relation to the div's width and height? For instance, if I create a 300px by
300px div and add a 1px border to it, have I now created a 302px by 302px
div, or have I reduced my usable space within the div to 298px by 298px?

Nicholas

In article <tdadnSSUaJdKqu_YnZ2dnUVZ_qadnZ2d (AT) comcast (DOT) com>,
"Nicholas" <no-reply (AT) email (DOT) com> wrote:

When adding a border to a div with CSS, where does it's pixels exist in
relation to the div's width and height? For instance, if I create a 300px by
300px div and add a 1px border to it, have I now created a 302px by 302px
div, or have I reduced my usable space within the div to 298px by 298px?

Nicholas

'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + 'margin-right' = width
of containing block

To see, make a test with huge borders, use a Strict 4.01 doctype.

--
dorayme

Thanks


"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

In article <tdadnSSUaJdKqu_YnZ2dnUVZ_qadnZ2d (AT) comcast (DOT) com>,
"Nicholas" <no-reply (AT) email (DOT) com> wrote:

When adding a border to a div with CSS, where does it's pixels exist in
relation to the div's width and height? For instance, if I create a 300px
by
300px div and add a 1px border to it, have I now created a 302px by 302px
div, or have I reduced my usable space within the div to 298px by 298px?

Nicholas

'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + 'margin-right' = width
of containing block

To see, make a test with huge borders, use a Strict 4.01 doctype.

--
dorayme

On Sat, 2 Dec 2006 20:35:01 -0600, "Nicholas" <no-reply (AT) email (DOT) com>
wrote:

When adding a border to a div with CSS, where does it's pixels exist in
relation to the div's width and height? For instance, if I create a 300px by
300px div and add a 1px border to it, have I now created a 302px by 302px
div, or have I reduced my usable space within the div to 298px by 298px?

The former, except that Internet Explorer does it the wrong way in
versions less than 6.0 and will do it wrong with 6.0 unless given a
doctype that will put it in "standards" mode.

But the CSS standard calls for both borders and padding to increase the
width or height (or both) of an element.