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

Adam Oswick
Adam Oswick
8,208 Points
Posted by Adam Oswick
Adam Oswick
8,208 Points

Why doesn't "box-sizing: border-box;" mean that margins are included in the 50% width.

Why do we have to use the "margin-right: -3px;" property. Shouldn't they both take up 50% of the div each when they are set to "width: 50%" as we've used " * { box-sizing: border-box; } " at the start of the document. Thanks.

2 Answers

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

The margins are outside the border, so they are not included in the calculations for either box model.

I've occasionally wished there was a "margin-box" setting, but there isn't.

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Like Steven said: margins fall outside of the box. It's padding that falls within the box and stays around the box's content (.e.g. text, image, etc).

So if I have a box without the box-sizing property of 500px width and height, and I add a padding of 25px, its width and height will become 550px. If I add the box-sizing property to it the padding will be contained within the original 500px.

Hope it helps! Max

Robert Shala
Robert Shala
2,210 Points

literally a year ago, but i had the same question today....thank you for answering.