title: How to set only vertical padding?
body: <p>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</p>
  
  <pre><code>.myElement { padding-top: 20px; }
  .myElement { padding-bottom: 20px; }
  </code></pre>
  
  <p>but this way I need to repeat both the selector <code>.myElement</code> 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 <code>padding</code> with two values and replace the second length with <code>inherit</code>. That's not good CSS, I know, it was an attempt, but it doesn't work either (sets horizontal padding to 0):</p>
  
  <pre><code>.myElement { padding: 20px inherit; }
  </code></pre>
  
  <p>See here: <a href="http://jsfiddle.net/185ty3yp/" rel="noreferrer">http://jsfiddle.net/185ty3yp/</a></p>
  
  <p>Any advice how to do it better?</p>