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 Style the Portfolio

Margin and padding

What is the difference between margin and padding?

Joey Ward
Joey Ward
Courses Plus Student 24,778 Points

A margin adds space between the OUTSIDE of an element and the surrounding elements. Padding adds space INSIDE of an element (between the border and the element's content). Try adding a thick border to an element and playing with margin and padding. You will quickly notice the difference. Also try hitting F12 to use developer tools on your browser. There will be a box that illustrates the difference and provides you with values. In Chrome, click on the "Computed" tab in your developer tools to see this in action.

3 Answers

Martin Foldyna
Martin Foldyna
10,359 Points

Hi, with padding you expanding the inner space of the div/button or whatever. With margin you are giving more space to the outside of the div/button/photo etc... Hope it's not confusing what I wrote.

Thanks so much, you guys! All your answers were very helpful.