The padding-right
CSS property sets the width of the padding area on the right of an element.
An element's padding area is the space between its content and its border.
Note: The padding
property can be used to set paddings on all four sides of an element with a single declaration.
Syntax
/* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* Global values */ padding-right: inherit; padding-right: initial; padding-right: revert; padding-right: revert-layer; padding-right: unset;
The padding-right
property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.
Values
<length>
-
The size of the padding as a fixed value. Must be nonnegative.
<percentage>
-
The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by
writing-mode
) of the containing block. Must be nonnegative.
Formal definition
Initial value | 0 |
---|---|
Applies to | all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers |
Inherited | no |
Computed value | a computed <length-percentage> value |
Animation type | by computed value type |
Formal syntax
<length-percentage [0,∞]>
Examples
Setting right padding using pixels and percentages
.content { padding-right: 5%; } .sidebox { padding-right: 10px; }
See also
- Introduction to the CSS basic box model
padding-top
,padding-bottom
,padding-left
and thepadding
shorthand- The mapped logical properties:
padding-block-start
,padding-block-end
,padding-inline-start
, andpadding-inline-end
and the shorthandspadding-block
andpadding-inline