ADVERTISEMENT
ADVERTISEMENT

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:

CSS padding-right Property | Example 1

Output | After adding padding- right Property:

CSS padding-right Property | Example 2

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 »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.