1. css
  2. /properties
  3. /padding-right



The padding-right property is a CSS shorthand property that sets the padding space on the right side of an element. Padding refers to the space between the content of an element and its border. The padding-right property sets the amount of space between the right edge of the element's content box and the right edge of its padding box.


Setting a fixed padding value:

<div class="example-1">This is an example</div>
.example-1 {
  padding-right: 20px;

Setting a percentage padding value relative to the width of the containing block:

<div class="example-2">This is an example</div>
.example-2 {
  padding-right: 10%;

Using the padding shorthand property to set padding on all four sides of an element:

<div class="example-3">This is an example</div>
.example-3 {
  padding: 10px 20px 15px 5px;


lengthSpecifies a fixed padding in length units such as pixels (px) or ems (em).
percentageSpecifies a padding relative to the width of the containing block.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Best Practices

  • Use padding to create space between an element's content and its border. This can improve the readability and visual appeal of your web page.
  • Avoid using fixed padding values for padding-right that are larger than the width of the containing block, as this can cause overflow issues.
  • Consider using percentage values for padding-right to create responsive designs that adapt to different screen sizes and device orientations.
  • Use the shorthand padding property to set padding on all four sides of an element. This can make your code more concise and easier to read.
  • Avoid using padding as a substitute for margins, which are better suited for creating space between elements. Use padding to create space within an element, and use margins to create space between elements.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera