BlogsDope image BlogsDope

CSS padding-right

March 21, 2021 CSS PADDING 592

The padding-right property is used to set the padding on the right of an element. It is a longhand property for the padding property.


padding-right: value;


<length> : Specifies a right padding in px, pt, em, rem, cm, etc. Default value is 0. Negative values are not allowed.

<percentage> : Specifies the right padding as a percentage of the width of the containing block. Negative values are not allowed

initial : Sets the default value.

inherit : Inherits the value from parent element.


A simple example is given below.

See the Pen padding-right example by Aakhya Singh (@aakhya) on CodePen.

The following example shows giving right padding using percentage value.

See the Pen padding-right percentage value example by Aakhya Singh (@aakhya) on CodePen.

In the above demo, the right padding values of the two paragraphs are given as 5% of the widths of their respective parent elements. For the first paragraph, the width of the parent div is 400px whereas it is 700px for the parent div of the second paragraph. As a result, the right padding of the first paragraph is lesser than that of the second.

Browser Support

This property is supported in all the major browsers. Versions of IE for Windows upto 7 don't support the value inherit.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks

Please login to view or add comment(s).