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

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?

css


Solution 1:[1]

In short, no.

The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.

To set the individual padding values you must use the individual properties.

See http://www.w3.org/TR/CSS2/box.html#padding-properties

Solution 2:[2]

Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.

With the CSS Logical Properties and Values draft you will be able to do this in the future.

It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.

If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:

.element {
    padding-block: 10px;
}

Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.

Solution 3:[3]

If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.

Solution 4:[4]

Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.

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

p.another{
    padding: 30px 20px;  
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Wesley Smits
Solution 3 Yokocapolo
Solution 4 The Alpha

Related Questions