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.
Gregory Blythe2,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?
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/
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.
Hope this helps!
Aby AbrahamCourses Plus Student 12,531 Points
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?