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

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.


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


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


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.

Tags:

Css