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

Posted by Zach Perry
Zach Perry
1,303 Points

Having Trouble understanding Margin and Padding

I am currently working with CSS, and most other properties with CSS I can understand. However, when it comes to the margin and padding - I just start to scratch my head. After reviewing the videos, I still don't understand fully margin and padding ... and the difference between them. Can someone please help me understand them a little bit more? Thank you for your time

4 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Hey Zach,

Watch this video about the box model. It should help you understand margin and padding better.

Luke Glazebrook
Luke Glazebrook
13,564 Points
Luke Glazebrook
Luke Glazebrook
13,564 Points

Margin is applied to the outside of an element whereas padding is applied to the inside!

teddykrzy
teddykrzy
2,038 Points
teddykrzy
teddykrzy
2,038 Points

An easy way to picture margin and padding is to visualize a word with a border around it.

The padding on this element is the space between the word and the border, whereas margin is the space around the outside of the border containing the word.

Joey L.
Joey L.
4,601 Points
Joey L.
Joey L.
4,601 Points

Margin is optional invisible space around an element. Padding is the optional space between the element border and its content.

Additionally, by default, an increase in border and padding increases the visible dimensions of the element, regardless of its width and height settings. If you set box-sizing: border-box then the border and padding will remain within the set element width and height settings. This is because the width and height properties by default set the dimensions for the content area.