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

Posted by Atlas AKIN
Atlas AKIN
1,675 Points

Having Hardships Understanding Margins and Paddings as Concepts

I really do not understand specifically what these two does. Could someone please explain it clearly because I know, these two are very important and do not want to skip them.

3 Answers

Nathan Brown
Nathan Brown
229 Points

Hi Atlas,

I will do my best to quickly explain the concepts. First, remind yourself that essentially all displayed elements in web pages are rectangles. These rectangles can be made of up to four areas: content, padding, border, and margins. The content box is the only necessary dimensions the element needs to display its content, the others can all be set at zero. But you will usually have to rely on the other dimensions to allow your webpage elements to fill in the space of the page, for styling purposes, positioning, etc.

Besides the fact that padding is always inside the border and margins outside, the main difference between padding and margins is that padding is always the same color as the elements background and margins are always transparent.

You could look at these two resources to supplement Treehouse on the Box model:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes

and especially Section 8.1 Box Dimensions in this link:

http://www.w3.org/TR/CSS2/box.html

Nathan

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Atlas;

Welcome to Treehouse!

This topic comes up quite a bit and does cause some initial confusion. Please check out my answer here along with the associated discussion and post back if it is any more clear or if you still have questions.

Thanks and happy coding,

Ken

Atlas AKIN
Atlas AKIN
1,675 Points
Atlas AKIN
Atlas AKIN
1,675 Points

Guys Thank you so much; the box model is pretty clear right now. If I encounter any coding problem; I'll ask it again; but as concepts, I am ok with them now.