CSS paddingright Property (original) (raw)

CSS padding-right Property

Last Updated : 28 May, 2026

The padding-right property in CSS is used to add space between the content and the right border of an element. It helps improve spacing and alignment within webpage elements.

• It sets the width of the right padding area of an element.
• Padding is the space between the content and the border.
• The value can be defined using units like px, %, or em.

**Syntax:

padding-right: length | percentage | initial | inherit;

**Property values:

• **length: This mode is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
• **percentage: This mode is used to set the right padding in percent of the width of the element. It must be non-negative.
• **initial: This property is used to set the default value.

**Example: Here, we use padding-right: length; property.

html `

<style>
    .geek {
        padding-right: 200px;
        color: white;
        background: green;
        width: 50%;
        font-size: 18px;
    }
</style>

GeeksforGeeks

<h2>
    padding-right Property
</h2>

<!-- padding-right property used here -->
<p class="geek">
    This paragraph has a padding-right: 200px;
</p>

`

**Example: Here, we are using padding-right: percentage; property.

html `

<style>
    .geek {
        padding-right: 40%;
        color: white;
        background: green;
        width: 50%;
        font-size: 18px;
    }
</style>

GeeksforGeeks

padding-right Property

<!-- padding-right property used here -->
<p class="geek">
    This paragraph has a padding-right: 40%;
</p>

`

**Example: Here, we are using padding-right: initial; property.

html `

<style>
    .geek {
        padding-right: initial;
        color: white;
        background: green;
        width: 70%;
        font-size: 25px;
    }
</style>

GeeksforGeeks

<h2>
    padding-right Property
</h2>

<!-- padding-right property used here -->
<p class="geek">
    This paragraph has a padding-right: initial;
</p>

`