Borders - inside or out?

Hi-

I have a question that I haven't been able to find any info on:

If I have an element (say, a <div> or a <table>) which is a certain
fixed width (let's say 500px).

If I add a CSS border of 2 px, does the element:

a) become 504px wide, or
b) does the inner area of the element become 496px wide?

Basically, I'm trying to find out of the border takes up space on the
outside or the inside of the element.

Any help would be appreicated!

Thanks,

Rob

chudzikr (AT) gmail (DOT) com wrote:

Basically, I'm trying to find out of the border takes up space on the
outside or the inside of the element.

Elements are things in the source code of the document. When they're
rendered onto the page we usually call them boxes. Look up "CSS box
model" for explanations - brainjar.com has one of the better ones.

As to your "inside or outside ?" question, then this si something that
IE infamously got wrong to begin with. make sure you research "IE
quirks mode rendering" too.

On 2006-09-29, chudzikr (AT) gmail (DOT) com <chudzikr (AT) gmail (DOT) com> wrote:

Hi-

I have a question that I haven't been able to find any info on:

If I have an element (say, a <div> or a <table>) which is a certain
fixed width (let's say 500px).

If I add a CSS border of 2 px, does the element:

a) become 504px wide, or
b) does the inner area of the element become 496px wide?

(a) for most things, but (b) for tables!

Basically, I'm trying to find out of the border takes up space on the
outside or the inside of the element.

On the outside generally speaking, but tables and tds are a bit
different. I suspect this goes back to HTML table attributes, where
"width" specifies "the desired width of the entire table".

thanks, Ben -- that's exactly what I was looking for!
Ben C wrote:

On 2006-09-29, chudzikr (AT) gmail (DOT) com <chudzikr (AT) gmail (DOT) com> wrote:
Hi-

I have a question that I haven't been able to find any info on:

If I have an element (say, a <div> or a <table>) which is a certain
fixed width (let's say 500px).

If I add a CSS border of 2 px, does the element:

a) become 504px wide, or
b) does the inner area of the element become 496px wide?

(a) for most things, but (b) for tables!

Basically, I'm trying to find out of the border takes up space on the
outside or the inside of the element.

On the outside generally speaking, but tables and tds are a bit
different. I suspect this goes back to HTML table attributes, where
"width" specifies "the desired width of the entire table".

Thanks, -- brainjar is a good resource.
chudzikr (AT) gmail (DOT) com wrote:

Hi-

I have a question that I haven't been able to find any info on:

If I have an element (say, a <div> or a <table>) which is a certain
fixed width (let's say 500px).

If I add a CSS border of 2 px, does the element:

a) become 504px wide, or
b) does the inner area of the element become 496px wide?

Basically, I'm trying to find out of the border takes up space on the
outside or the inside of the element.

Any help would be appreicated!

Thanks,

Rob