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
Tim Kennedy
6,807 PointsMargin 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
Orlando D. Alvarez
4,639 PointsYou 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.
Orlando D. Alvarez
4,639 Points``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.
Tim Kennedy
6,807 PointsI think I got it now! Thanks for the help!
Orlando D. Alvarez
4,639 PointsTell me if this answer your question :)
Jeff Busch
19,287 PointsHi Tim,
Try these visual explanations, maybe they will help.
When to use margin vs padding in CSS stackoverflow
Jeff