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
Jonathan Case
4,884 Pointspadding vs padding-right ect.
In this example, and others that I have seen with margin as well, the instructor will choose to use the specific attributes relating to side rather than the shorthand. Does it make a difference how you write it out? Is there any advantage towards doing it one way or another.
Ex. from this video:
.btn {
cursor: pointer;
font-size: .875em;
font-weight: 400;
color: #fff;
padding-left: 20px;
padding-right: 20px;
text-transform: uppercase;
}
vs
.btn {
cursor: pointer;
font-size: .875em;
font-weight: 400;
color: #fff;
padding: 0 20px;
text-transform: uppercase;
}
3 Answers
Chase Swanson
Courses Plus Student 8,886 PointsThere is no advantage other than one may be easier to read than another. They mean exactly the same thing. Really comes down to personal preference.
In my experience I almost always see shorthand being used, rarely see it typed out like in example 1. Only time I do is if they are only setting one side, which still can be set with shorthand.
Mohamed Hak
17,195 PointsI think the first example will leave the padding(top-bottom) to its original settings and only change the padding(right-left). the second example will set the top-left padding to 0 which going to make the text squeezed and doesn't have room to breath from top and bottom and set the right and left padding to 20px.
hope this help.
René Sánchez
9,954 PointsIt seems that when you use the shorthand property you are, almost always, assigning a padding value to each side of the element. This new value might not be the same as the default value, so just declaring padding for specific sides of an element will only modify that side's padding value and leave the other three sides with default padding values.