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

How do we know when to use padding and margin?

Say, I want to make some spaces between image and text below the image.

How do I know whether I should change margin or padding like this tutor in the video?

4 Answers

  1. Padding is inside the block element . Padding makes your inside block element/inner container distance according to your desire.

  2. Margin makes distance between body wall and container.

Padding is inside the block element and margin is outside. You pick one or the other depending on what you want.

Thank you for your quick reply.

In what situation do people use margin and padding respectively?

I don't think there is a set answer. You have to look at the element and what you want. For example, in a list you use margin to provide separation with the elements around. You would use padding to provide separation between list items. I usually make a guess and give it a try. If it is not what I want, I try something else.

Darren Joy
Darren Joy
19,573 Points

"How do I know whether I should change margin or padding like this tutor in the video?"

Consider it visually. Or consider it like a 'table' in Word. What do you want it to look like?

Where do you want your border? That will help you decide what you want to 'space' around it...

Margin will 'push' things outside that border 'away'.. (like other items, DIVs images etc)

Padding will 'shrink' things inside that border. (like text etc)

depends on your design. It should better you start design your structure (css) after complete the html div or container.