Welcome to the Treehouse Community
Looking to learn something new?
The 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
Sam May8,363 Points
Also - 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 Hopgood7,825 Points
Padding 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.
If 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.
Sam May8,363 Points
The 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 HealyFront End Web Development Techdegree Student 23,565 Points
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!