CSS Borders and Overall Width

[inchecksolution]

Hi Guys,

Quick question. I was wondering if adding a border onto a div actually increases the height/width of it?

For example, if I have a div with a class of "container" and in css I set the container to a width of 600px, and then add a border of 10px, is the border within the div or around the outside?

If it does go around the outside than I guess my div is actually 620px wide (10px border on each side)?

[fahmi]

http://img163.imageshack.us/img163/3402/boxmodel.png

Width or height that you set is actually just the dimension of the content area itself. Padding, border and margin don't belong to that dimension.

Example: Let say you make a box with 600px width and 400px height, then a padding of 20px in all direction, border of 5px and margin 10px all around, then the space that you need is:

Width needed = 600px (content) + 40px (padding) + 10px (border) + 20px (margin)

Height needed = I guess you knew