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 Adding Pages to a Website Add Iconography

Margin vs. Padding for .contact-info a{}

I see what it does, but I get confused with these 2. In this tutorial, the padding was technically effecting the left and right, and the margin was effecting the top and bottom. I am confused with this concept? Could someone please explain what exactly is happening here... Thanks!

padding: 0 0 0 30px; margin: 0 0 10px;

4 Answers

You have 4 values of padding, the first 0 is for the top, the second is for the right, then the bottom and the 30px for the left.

``margin: 5%; /* all sides 5% margin */

margin: 10px; /* all sides 10px margin */

margin: 1.6em 20px; /* top and bottom 1.6em, left and right 20px margin */

margin: 10px 3% 1em; /* top 10px, left and right 3%, bottom 1em margin */

margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */

margin: 1em auto; /* 1em margin on top and bottom, box is horizontally centered */

margin: auto; /* box is horizontally centered, 0 margin on top and bottom */``

I think this is it. And the same goes for padding.

I think I got it now! Thanks for the help!

Tell me if this answer your question :)

Hi Tim,

Try these visual explanations, maybe they will help.

w3schools CSS Box Model

When to use margin vs padding in CSS stackoverflow

Jeff