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

padding css
padding-bottom
top padding
image padding html
border padding css
cell padding css
vertical padding
css padding color

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?

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.

padding, How do you give padding to the top and bottom? CSS Padding. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

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

CSS - Paddings, will be 2% of the total width of the document. This property can have from one to four values. If the padding property has four values: padding:10px 5px 15px 20px; top padding is 10px; right padding is 5px; bottom padding is 15px; left padding is 20px; If the padding property has three values: padding:10px 5px 15px; top padding is 10px; right and left padding are 5px; bottom padding is 15px

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

padding, When using the padding property Are you allowed to use negative values? You can control the padding applied to the four sides of an element using the padding-top, padding-right, padding-bottom and padding-left properties. You can also specify the padding using the

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>

How do I prevent the padding property from changing width or , The padding property is a shorthand to avoid setting each side This will put 0 padding on top and bottom, and 14px on the right and left. I have tried this bit of code: hr { margin: 3px; } and it worked, to an extent. The problem being its adding a margin around all sides of the horizontal rule. As the margin px value increased, the shorter the horizontal rule got. I would like to be able to only effect the top and bottom padding o

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.

Change only one axis of padding property maintaining the other , Thus, if only one value is defined, this sets all four padding properties to the same .box { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; If an element has a specified width, any padding added to that element will add to the Here's a Pen demonstrating this: HTML; CSS. Result. EDIT ON. Thus, if only one value is defined, this sets all four padding properties to the same value:.box { padding: 20px; } If three values are declared, it is padding: [top] [left-and-right] [bottom];. Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property.

Collapsing Margins, Each of the margin properties can also accept a value of auto . happen on horizontal margins (left and right), only vertical (top and bottom). The only time it's ok to leave out a unit is when you're setting something to zero. padding: 0; is a valid declaration, as zero is zero no matter which way you slice it. There is also a shorthand margin property, which is great if you're setting each side differently. The sequence is clockwise from the top — top, right, bottom, left.

JavaScript for Modern Web Development: Building a Web Application , Building a Web Application Using HTML, CSS, and JavaScript Alok Ranjan, and no height, then the top and bottom margin will be merged into one single margin. Depending on the element's display property, its box may be one of two Each inline element uses only the space needed to display the actual content, and  You can also set different values for the padding on each side of the box using the following properties − The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element.

How can I change the top and bottom padding of horizontal rule , The problem being its adding a margin around all sides of the horizontal rule. As the margin px horizontal rule got. I would like to be able to only effect the top and bottom padding o for that as well. css padding property. The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Comments
  • Maybe explaining why 2 properties isn't an option would help give you a better solution.
  • I think it's a good question. Sure you can write them out; in this case it doesn't matter that much. But what if you want to change three borders - color, style and width, while leaving the fourth intact. You'd have no choice but to write that out in full.
  • padding:30px 0px 30px; would set top 30px left & right 0px bottom 30px and would be effectively the same as setting padding: 30px 0;