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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Eden Benito
PLUS
Eden Benito
Courses Plus Student 951 Points
Posted by Eden Benito
Eden Benito
Courses Plus Student 951 Points

I find it difficult to understand the difference between padding and margin. What different effect do they have? Thanks.

Nick has put the value for the margin to 0 and then he gave padding the value of 5% and i'm trying to understand the logic behind that, instead of just adding a value to the margin. Both add spacing right?

Richard Gibson
Richard Gibson
Courses Plus Student 2,832 Points
Richard Gibson
Richard Gibson
Courses Plus Student 2,832 Points

The padding lets you move the pixels inside of the element(its apart of the element). The margin moves the actual element, margins are considered to be outside of the element.

2 Answers

Iago Wandalsen Prates
Iago Wandalsen Prates
21,699 Points
Iago Wandalsen Prates
Iago Wandalsen Prates
21,699 Points

Margin add space outside the element, while padding add space inside the element.

It's easier to see if you have an element with a background with a different color, or a border and have some text inside it. If you don't add padding, the text will start at the very corner, while if you add padding, the text will be further away from the corners. Also, adding padding to an element, makes the element bigger.

Nick Ocampo
Nick Ocampo
15,661 Points
Nick Ocampo
Nick Ocampo
15,661 Points

I think it's easier to understand with a picture: http://www.geekchamp.com/upload/tutorials/marginpaddingbasic.png

Every HTML element is encased in a rectangle. Some elements don't look like rectangles only because their borders are invisible or their corners have been changed with CSS. So you can think of each element as being inside a fence, which is the border. Padding is the inside space between the element and the border, while margin is the outside space between the border and everything else on the outside.

When laying things out, sometimes there's not a big difference in whether you use margin or padding, but sometimes (for instance if you have a visible border around your element) the difference will be very evident. The CSS Layouts course will probably help you understand their subtle differences better.

Eden Benito
Eden Benito
Courses Plus Student 951 Points
Eden Benito
Eden Benito
Courses Plus Student 951 Points

Thank you Nick, the image really makes it clear as to what the difference is. I completely understand the difference. Thanks a lot.