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 Sil Aujla
Sil Aujla
1,068 Points

Padding and Margin Difference for this Case

Hi in this video Nick added padding around images to move them away from the text. He wrote:

.contact-info a { .......(code)..... padding: 0 0 0 30px;
margin: 0 0 10px; }

I don't understand it conceptually. For padding and margin, I understand that the the 4 numbers means different directions. padding (top) (right) (bottom) (left);

But wouldn't putting the padding on the left push the image more to the left e.g. more into text (overlapping it?).

3 Answers

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Think of padding as the space inside the content and margin the space outside the content.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Think of padding as adding space on the side you're defining. So if you add space on the left, you're actually pushing the content to the right.

paddingVSmargin-visualguide

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

margin is inside the box. padding is outside of the box. hence the name padding. Margin is the space between to things. Padding will make things fatter.