Should I specify all 4 paddings or overriding just one of them is also a good practice? - css

Question

For a given class, I want to have the following styles:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
But that's a lot of duplicates so I would like to just write:
stlye1 {
padding: 0;
padding-bottom: 10px;
}
Will this be something bad to do?
update:
when I see 3 values (the short hand), i'm not sure what is the last one going to apply to.
so i came up with the second method above to make it clear which one i want to override.
update 2:
for a short hand method, how do you specific the followings:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
style1 {
padding: 0 0 10px; // now i know this one, thanks!
}
stlye2 {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
style2 {
padding: 0 10px 0; // is this correct?
}
stlye3 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
}
style3 {
padding: 10px 0 0; // is this correct?
}
stlye4 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
style4 {
padding: // i have no clue.
}
update 3:
in short, style2 and 4 cannot be done in shorthand format by suppling 3 values only.
as indicated by PassKit, left and right can't be specified alone with 3 values only.

Answer 1

Why don't you just use the shorthand?
stlye1 {
padding: 0 0 10px; /* top (right/left) bottom */
}
Where it's:
padding: top right bottom left;

Answer 2

While your suggestion is perfectly valid, the most concise form would be:
stlye1 {
padding: 0 0 10px;
}
This short hand format breaks down as padding: top(0) right(0) bottom(10px); and left defaults to the right value because a left value has not been specified.
For the 4 styles in your question, styles 1 and 3 are correct, but for styles 2 and 4, see style 5 below and the accompanying note.
For reference, the style shorthand breaks down as follows:
If there is one value, it applies to all 4 attributes, top, right, bottom and left.
stlye1value {
padding: 10px;
}
/* equals */
stlye1value {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
If there are two values, the first value applies to top & bottom attributes and the second value to left & right
stlye2values {
padding: 0 10px;
}
/* equals */
stlye2values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
If there are 3 valus, the first applies to top, the second applies to left & right and the third applies to bottom.
stlye3values {
padding: 0 10px 20px;
}
/* equals */
stlye3values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
Specifying all 4 values sets padding in the order top, right, bottom, left (think of a clockwise circle starting at the top).
stlye4values {
padding: 0 10px 20px 30px;
}
/* equals */
stlye4values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
}
Note: There is no way to independently specify a right or left value using shorthand without entering all 4 values or using the padding-left or padding-right.
style5 {
padding-left: 10px;
}
/* providing there are no previous padding rule for style5 equals */
style5 {
padding: 0 0 0 10px;
}
/* equals */
stlye5 {
padding:0;
padding-left:10px;
}
/* equals */
stlye5 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}