Should I specify all 4 gaskets or redefine only one of them is also good practice?

Question

For this class, I want to have the following styles:

stlye1 { padding-top: 0; padding-right: 0; padding-bottom: 10px; padding-left: 0px; } 

But these are many duplicates, so I would just write:

 stlye1 { padding: 0; padding-bottom: 10px; } 

Will it be something bad?

update:

when I see 3 values ​​(short arm), I am not sure which last one refers. so I came up with the second method above so that it makes it clear which one I want to override.

update 2:

for the short hand method, how do you define the following:

 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 made in abbreviated format, if only 3 values. as indicated by PassKit, the left and right cannot be specified with only 3 values.

Answer 1

Despite the fact that your proposal is absolutely correct, the most concise form will be:

 stlye1 { padding: 0 0 10px; } 

This short hand format is split like padding: top(0) right(0) bottom(10px); and leaves the default values ​​correct because the left value is not specified.

For 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, a style transcript is broken 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 refers to the upper and lower attributes, and the second value refers to the left and right

 stlye2values { padding: 0 10px; } /* equals */ stlye2values { padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; } 

---

If there are 3 values, the first applies to the beginning, the second refers to the left and right, and the third refers to the bottom.

 stlye3values { padding: 0 10px 20px; } /* equals */ stlye3values { padding-top: 0; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } 

---

Setting all 4 values ​​sets the complement in the order from the top, right, bottom, left (think of the circle clockwise, starting from the top).

 stlye4values { padding: 0 10px 20px 30px; } /* equals */ stlye4values { padding-top: 0; padding-right: 10px; padding-bottom: 20px; padding-left: 30px; } 

---

Note. It is not possible to specify the right or left value yourself using shorthand without entering all 4 values ​​or using 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; } 

Answer 2

Why don't you just use shorthand?

 stlye1 { padding: 0 0 10px; /* top (right/left) bottom */ } 

Where is it:

 padding: top right bottom left;