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 Build Navigation with Unordered Lists

lagah rajan
lagah rajan
1,741 Points
Posted by lagah rajan
lagah rajan
1,741 Points

what is difference b/w padding and margin.

.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It has everything to do with the box model: https://css-tricks.com/the-css-box-model/

Padding will grow the element's size itself, margin will create space around the element. It more or less goes content > padding > border > margin.

That link will explain it better.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

If you have a border, padding will be on the inside of the border, margin will be on the outside of the border. Padding is like expanding your element itself. Margin is giving more space between the element and its neighbor. If you click inside the padding, you're clicking the element. So if I give my button a lot of padding, I have a nice big fat clickable button. If you click the margin, you're clicking the background behind it.