CSS padding-right Property

Learn about the CSS padding-right property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 13, 2022

Designing a web page is not an easy task. You need to make sure all the elements are positioned in the correct place. Padding is one of the important aspects which serves this purpose. We use padding property to provide space between an element's content and its border. Padding is a shorthand property of padding-left, padding-right, padding-top, padding-bottom. In this article, we will specifically deal with padding-right property in CSS.

What is CSS padding-right Property?

The padding-right property is used to give padding (space) from the right side of an element. The default value is 0.

Almost all browsers support this property.

Syntax:

padding- right: % length| initial| inherit

Quick overview of the syntax used,

Value	Explanation
%	right padding in terms of percentage of the width of an element.
length	right padding in units of length (m, cm, px, pt., etc.)
initial	padding- right property to its default value.
inherit	The same value of the padding-right property as used in container (parent) class.

The example given below illustrates CSS padding-right property

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>padding-right</title>
   </head>
   
   <style>
      body {
      background-color: brown;
      }
      th {
      border: 2px solid black;
      font-size: x-large;
      background-color: yellow;
      padding-right: 40%;
      }
      .Table1 {
      width: 100%;
      }
   </style>
   
   <body>
      <div class="container">
         <table class="Table1">
            <tr>
               <th>Name</th>
               <th>Alex</th>
            </tr>
            <tr>
               <th>Age</th>
               <th>18</th>
            </tr>
            <th>Height</th>
            <th>5'8"</th>
         </table>
      </div>
   </body>
</html>

Output | Before adding padding-right Property:

Output | After adding padding- right Property:

We have created one table. The CSS padding-right property is used, which targets all the elements of a table. We have set the right padding for the <th> element to 40%. The text shifts to the left, creating space to the right as you can see in the final output.

CSS Tutorial & Examples »

The padding-left Property in CSS

The padding-top Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples