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
Gregory Blythe
2,504 PointsDo 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
5,918 PointsYes 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
27,930 PointsHi 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
2,504 PointsThank you all, Bradley, that was perfect!
Aby Abraham
Courses Plus Student 12,531 PointsHi 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
27,930 PointsHi 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