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.

CSS How to Make a Website CSS: Cascading Style Sheets Style the Basic Elements

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

5 Answers

Sam May
Sam May
8,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 Hopgood
Clinton Hopgood
7,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.

(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
Sam May
8,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 Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Hi 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
Sam May
8,363 Points

Well said. There's no substitute for practice.