Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS padding-right

Padding is the space between the content and the border of an element.

The padding-right property adds spacing to the right of the element.

It accepts any length value, such as, px, %, em, etc.

Example

#

An element with a 50-pixel padding-right value.

This element has a 50px right padding
<div style="padding-right: 50px;
            text-align:right;
            border:2px solid steelblue;">
  This element has a 50px right padding
</div>

Syntax

padding-right: length | initial | inherit;

Values

#

Value Description
length Sets the right padding using any valid CSS length values. Default is 0. Negative values are allowed.
% Sets right padding in percent of the width of the containing element
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different padding-right values.

5% right padding
<style>
  .padding-right {
    padding-right: 5%;
    border: 2px solid steelblue;
    text-align: right;
  }
</style>

<div class="padding-right">
  5% right padding
</div>

Browser support

This table shows when padding-right support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides