- This topic is empty.
January 29, 2015 at 9:25 am #194611
Let’s say I have an element with some padding:
padding: 20px 40px;
And let’s say I have a media query that adjusts that on a different screen size, but I only want to change the left and right padding, and leave the top/bottom padding alone. (whatever their value may be).
My question is, do I have any shorthand options? Or do I have to declare like this:
padding-left: 10px; padding-right: 10px;
Ideally I would like to do something like this:
padding: previous 10px;
Where “previous” would inherit the 20px from the previous declaration.
Is this something that is possible or will I just have to abandon shorthand in this case?January 29, 2015 at 9:41 am #194614Paulie_DModerator
Why not use the same shorthand again but different values?
padding: 20px 10px;
Yes, you are repeating the top/bottom property but it’s still shorthand.January 29, 2015 at 9:43 am #194616
Ideally I wouldn’t want to declare them twice (DRY Blah blah blah)
and potentially the query might be lines away from the initial declaration, so I might have to hunt for what the value was.
Or, in the reverse, change the initial declaration and not worry if there was a media query override for that property later on in the code.January 29, 2015 at 10:07 am #194623Paulie_DModerator
SASS or LESS then…make it a variable.
potentially the query might be lines away from the initial declaration, so I might have to hunt for what the value was.
Why not just put the media query right there then?
Performance wise it’s not really an issueJanuary 29, 2015 at 10:09 am #194625
99% of the time it’s not an issue, I either declare right after or use non-shorthand (or if it’s variable worthy, make it a variable).
It’s more of a curiosity than anything else, really.January 29, 2015 at 10:09 am #194626SenffParticipant
In this specific case: yes, you have to either declare padding for ALL sides, or ONE side (and then do that twice). With normal CSS you can’t override just 2 or 3 sides in one line.
- The forum ‘CSS’ is closed to new topics and replies.