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

Jeff Goes
Jeff Goes
2,745 Points
Posted by Jeff Goes
Jeff Goes
2,745 Points

what is the difference between calling 'padding' and 'margin', what is the exactly diference between them? thank you

I just would like to know the difference so I can use it appropriately. Thank you all

5 Answers

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

In html all containers have borders.

  • Margin adds space to the outside of the containers border.
  • Padding adds space to the inside of the containers border.

Check this example: http://codepen.io/Jesusz0r/pen/VYGKLP

Roberto Cardenas
Roberto Cardenas
10,478 Points

I agree.

Julian Pinz贸n Eslava
Julian Pinz贸n Eslava
11,401 Points
Julian Pinz贸n Eslava
Julian Pinz贸n Eslava
11,401 Points

Sometimes a graphic explanation is best to really understand the difference between margin and padding --> http://guistuff.com/css/images/boxmodel.png

Roberto Cardenas
Roberto Cardenas
10,478 Points
Roberto Cardenas
Roberto Cardenas
10,478 Points

Padding adds space around your content and the border. Used to add space to text, images, etc.

Margin adds space outside your content and the border. Used to separate one element from another.

Jelique Edward
Jelique Edward
1,691 Points
Jelique Edward
Jelique Edward
1,691 Points

The difference between padding and margin is that specifying a value for the margin of an element will move said element around the page. For example, if you set the "margin-left" to 20px, this will move the element 20px across the screen from the left.

Where as padding will extend the space between the content of the element and it's border. If you set the "padding-bottom" to 20px, the bottom border of this element will extend down.

Jeff Goes
Jeff Goes
2,745 Points
Jeff Goes
Jeff Goes
2,745 Points

Thank you all!! Got it now :)