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 CSS Selectors Selectors - Beyond the Basics DRY CSS

Jonathan Case
Jonathan Case
4,884 Points

padding 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
PLUS
Chase Swanson
Courses Plus Student 8,886 Points

There 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
Mohamed Hak
17,195 Points

I 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
René Sánchez
9,954 Points

It 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.