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

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

Posted by Eduard Edwin
Eduard Edwin
14,569 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,635 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
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

one box:

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