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
Giovanni Valdenegro
13,871 PointsPadding vs Margin
On this video, he used the following for the anchor element of the ul li:
.contact-info a {
display: block;
min-height:20px;
background-repeat:no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px
}
Why is it not recommended to do the following which does the same?
.contact-info a {
display: block;
min-height:20px;
background-repeat:no-repeat;
background-size: 20px 20px;
padding: 0 0 10px 30px;
I assigned 10px to the padding instead of the margin. How would this make a difference exactly because it looks the same on my browser???
Thanks,
Giovanni
6 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Giovanni,
There will not be a visual difference between the two but there will be a usability difference.
When you apply the 10px of bottom padding to achieve the space then it becomes part of the click area for that link.
This means for example, you could be just a few pixels above the email link but it will actually activate the phone link because you're within the 10 pixels of bottom padding on the phone link. This could be frustrating especially in this case because there is no hover state on the links giving you that extra feedback of what link you'll be activating when you click.
Nick chose to solve the problem using margin so that there would be 10px of dead space between the links.
If these weren't links and only text with icons, then there would not be any practical difference between either solution.
In certain situations, margins and padding can be used somewhat interchangeably. This is usually when there are no background images, background colors, borders, or user interaction involved.
Gloria Dwomoh
13,116 PointsMargin and padding are two different things, that might look the same but it is not. Imaging you have a box with a purse in it. The gap between each side of the purse and the perimeter of the box is the padding while margin is the exterior gap between the perimeter and its outer surroundings. I hope my example helps in some way.
Giovanni Valdenegro
13,871 PointsI understand that part I have seen many examples online of the difference, there are images representing this.
I guess my main question was why use margin versus padding for the text. Why is it preferable for the bottom apace.
I guess cause the elements cant touch and if I was to use padding there is a possibility of overlapping?
stjarnan
Front End Web Development Techdegree Graduate 56,488 PointsYes, as you said there is a possibility of overlapping!
Gloria Dwomoh
13,116 PointsYou added margin because you want to add an external space. In my example think of it as adding space between the box I used previously and a chair that is next to it. If you add that space to the padding what will happen is that a space will be added between the box and the purse which won't change the space between the chair and the box and in that lesson he is trying to add a space between two different elements so you need an outer space and to do that you need a margin. Maybe this makes it clearer?
stjarnan
Front End Web Development Techdegree Graduate 56,488 PointsUsing margin will add space outside of your "box", and push other objects away. The margin attribute is not a part of the element you're adding it to and you can use it to create more distance between other elements.
Padding on the other hand gives you more space around the content itself.
So to sum it up, the margin is the space outside of your element while the padding is the space inside of your element. Does this make sense to you?
I am still trying to learn all of this myself but this is how i understand it!
Good luck! / Jonas
Giovanni Valdenegro
13,871 PointsHi Jonas,
Yes I understand that part, I appreciate you taking the time to help me out.
I was looking at the code further and imagining the following:
Padding was applied to the anchor element since it is within the same anchor element and margin was applied since it is another element below it.
I think I might of solved this by imagining it this way.
I appreciate all the answers. Thanks.
Regards,
Giovanni
Gloria Dwomoh
13,116 PointsYes somehow like that. If you try to draw it on a paper it will make things easier to understand.
Aurelian Spodarec
7,369 PointsHi, if this helps too , imagine picture wall.
If you put the picture on the wall in corner and you apply margin , you will move the picture away from the wall, from the edges of the wall. Instead if you apply padding , the image will move inside the thingy so it will move like margin:20px it will have e.g 20cm of white space and it will look like that.
http://rekodziela.pl/photos/obraz-haft-krzyzykowy-sikorki-ramka-szklo-2940521408.jpg
In this case e.g the margin is applied 10px top and bottom and 20px left and right. So you see the image space between wall.
If you look at the picture ,, it has padding e.g. 5px margin every way . And brown colour appears . So margin is outside and padding is inside .
Hope it helps too imagine better etc..
yannverreault
12,599 Pointsyannverreault
12,599 PointsBest answer. Thank you!