Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) The Box Model Borders

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

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/

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

Thank you all, Bradley, that was perfect!

Aby Abraham
PLUS
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?

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