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.

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by Eduard Edwin
Eduard Edwin
14,568 Points

What is the difference between margin and padding?

I can't get my head around the concept of margin and padding. The way I understand it, it's like two boxes, one wrapped around the other, separated by a 'border'. Correct me if I'm wrong; this seems like a very important concept to grasp before one can build a website.

On the subject of navigation, what is the function of the nav element? Is this related to the div element, where it divide each section of a web page?

Thanks in advance for your answer.

3 Answers

Dovie Kazinec
Dovie Kazinec
1,634 Points

Padding is the space that’s inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side with CSS.

Margin is the space between the border and next element. The space outside the border between it and the other elements is the margin. Just like padding, it’s possible to target all four sides of an element to change it’s margin.

Here is an image that best describes it. http://i0.wp.com/blog.digitaltutors.com/wp-content/uploads/2015/02/examples.jpg?zoom=1.5&resize=800%2C450

Mark Wilkowske
MOD
Mark Wilkowske
Treehouse Moderator 17,494 Points
Mark Wilkowske
Mark Wilkowske
Treehouse Moderator 17,494 Points

one box:

  • :package:
  • padding - put inside the box (adds to width/height)
  • border - limit of visible area
  • margin - outside the box (push away)