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 trialEdward Zhou
377 PointsHow 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
Nurul Ahsan
2,039 PointsPadding is inside the block element . Padding makes your inside block element/inner container distance according to your desire.
Margin makes distance between body wall and container.
Ted Sumner
Courses Plus Student 17,967 PointsPadding is inside the block element and margin is outside. You pick one or the other depending on what you want.
Edward Zhou
377 PointsThank you for your quick reply.
In what situation do people use margin and padding respectively?
Ted Sumner
Courses Plus Student 17,967 PointsI 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
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)
Nurul Ahsan
2,039 Pointsdepends on your design. It should better you start design your structure (css) after complete the html div or container.