Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Borders

Gregory Blythe
Gregory Blythe
2,504 Points
Posted by Gregory Blythe
Gregory Blythe
2,504 Points

Do borders increase the size of the box?

Does the size of the border automatically add to the size of the box or is it on the inside of the box or 50-50?

4 Answers

Bradley Davis
Bradley Davis
5,918 Points

Yes I does increase the size of the box. You can use the box-sizing: border-box; property to include the border into the box's width.

Link here will tell you everything you need to know and what browsers the box-sizing method works in (works in most). http://tympanus.net/codrops/css_reference/box-sizing/

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Gregory,

Yes the border size you add will be added to the overall size of a box before margin is added so here goes a long winded load of numbers but will help clear it up:

Box = 10px width, Padding = 10px left and right, Border = 5px, Margin = 10px left and right,

Total area width covered by box = 60px,

The best way to have a look at the box model is chrome dev tools it shows the are and its order covered by each section.

Very Informative Link Good Visual Link

Hope this helps!

Craig

Gregory Blythe
Gregory Blythe
2,504 Points
Gregory Blythe
Gregory Blythe
2,504 Points

Thank you all, Bradley, that was perfect!

Aby Abraham
PLUS
Aby Abraham
Courses Plus Student 12,531 Points
Aby Abraham
Aby Abraham
Courses Plus Student 12,531 Points

Hi Craig,

If border value is not taking padding space, the dotted border should show white blanks in between dots. Here, in the video (at 03:11), with dotted/dashed border has dark gray dots in between orange border, which implies the border size is taking up padding space of 120px (left/right) .

Can you please update?

Craig Watson
Craig Watson
27,930 Points

Hi Aby,

I think what you are seeing is the background-color. The background will be behind everything except the margin. So by adding a 10px border you are simply increasing the area he background will cover to.

Craig