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
PRO
Chase Swanson
Pro 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,942 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.