How to set only vertical padding?

Question

Sometimes I would like to set top and bottom padding explicitly on an element but leave left and right padding to the unchanged browser default. I know I can write

.myElement { padding-top: 20px; }
.myElement { padding-bottom: 20px; }

but this way I need to repeat both the selector .myElement and the length value twice - or rather copy and paste the whole line and switch left with right. I was hoping to find something less redundant, so I tried to use padding with two values and replace the second length with inherit. That's not good CSS, I know, it was an attempt, but it doesn't work either (sets horizontal padding to 0):

.myElement { padding: 20px inherit; }

See here: http://jsfiddle.net/185ty3yp/

Any advice how to do it better?

Answer 1

If I understand what you want : you're looking for a way to only assign vertical padding with padding property (and keep original horizontal padding if it's set).

So you already have the answer :

.myElement { padding-top: 20px; padding-bottom: 20px;  }

You can't do that only with padding property, or you'll need to set horizontal value.

Or, you can consider using CSS preprocessors (such as Sass or Less), it will surely helps you to achieve this.