Can I alter only the top and bottom paddings with one property?

Issue

I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).

What I have tried is demonstrated here.

http://jsfiddle.net/nFCru/1/

In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.

p {
 border: 1px solid #000;
 padding: 20px;    
}

/* 
 * Here's my failed attempt at only altering the top 
 * and bottom padding values. The left and right padding
 * values are changing even if I use inherit.
 */

p {
 padding: 30px inherit;   
}​

Can I alter only the top and bottom paddings with one property?

Solution

No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.

Answered By - Mr Lister