Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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.

like image 298
Ray Cheng Avatar asked Feb 18 '23 22:02

Ray Cheng


1 Answers

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;
like image 155
Tom Walters Avatar answered Mar 08 '23 23:03

Tom Walters