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
David Kinoti
223 PointsThe Box Model Conundrum
Can someone please explain to me in a simple way how the box model works? I have researched and i know that every element in web design is a rectangular box,,,,,but explain the box model,,,,especially what PADDING is. Of all the elements of the box model, it's the one giving me problems!!!! PS:Give me tips on manipulating this box model,,,,,,please keep i simple
5 Answers
Sam May
8,363 PointsAlso - to explain margin and padding - imagine you have two playing cards side by side, face down. The space between the edge of the card and the graphic is the padding. The distance apart the cards are would be the margin.
So if you move the cards apart, you increase the margin.
If you were to increase the padding, the white space around the edge of the card would get thicker.
This is the best analogy I could think of! Hope it doesn't confuse matters...
Clinton Hopgood
7,825 PointsPadding is space added inside the element you apply it to as opposed to margins which are added outside of the element; borders are added in between the two.
benevolentescalator
Courses Plus Student 9,834 PointsIf you made the WIDTH of the box 10px and the PADDING 5px ---- the width will be 20px. 10px for the width + 5px padding on the left + 5px padding on the right = 20px.
benevolentescalator
Courses Plus Student 9,834 Points(keep in mind that borders create more 'width' and sometimes even spaces in your html document can add a few PX. This can sometimes create challenges when your trying to fit things exactly to 100% of the space available)
Sam May
8,363 PointsThe box-sizing property, however allows you to control how padding is applied to your element. Using box-sizing: border-box; is really useful. This means when you add padding, it doesn't add to the width you've already defined - instead the padding is added to the inside of the box. This stops your layout breaking if you want to add padding you hadn't accounted for at the time of build! Cheers, hope this makes sense. Sam
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsHi David,
My honest answer to you is to be patient and the understanding will come. About a month ago, having only been on Treehouse for a couple of months, I was wracking my brain with the same thing. But then I started to build a very simple one page personal website with several columns of content sitting along side each other in a single row. I'm still no expert but with a bit of trial and error using margin and padding I now have a better understanding of the box model in a practical setting. I think relying on the theory alone might get you worked up and have you believe you can't understand it, but that's only because you can't imagine how it works. Which brings me to my next point...
It's a cliche but it's the truth; you learn by doing. My advice, keep working through the HTML and CSS courses, do your own little projects, and the understanding will come!
Sam May
8,363 PointsWell said. There's no substitute for practice.