CSS padding-right

The CSS padding-right property is used to create right padding for specified element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{border: 2px solid coral; padding-right: 32px;}
   </style>
</head>
<body>
   
   <div class="myd">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam,
      itaque error? Autem, hic. Hic recusandae id repellat esse numquam,
      praesentium a quia est sint mollitia soluta tempore, adipisci ex
      consequatur placeat unde!? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Fugiat iusto consectetur cum?
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, itaque error? Autem, hic. Hic recusandae id repellat esse numquam, praesentium a quia est sint mollitia soluta tempore, adipisci ex consequatur placeat unde!? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat iusto consectetur cum?

Note - Right padding is the width of area after the content and before the border, of specified element.

CSS padding-right Syntax

The syntax of padding-right property in CSS, is:

padding-right: x;

The value of x should be any of the following:

length - used to define custom sized right padding
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - To learn about padding in detail, refer to its separate tutorial.

CSS Online Test

« Previous Tutorial Next Tutorial »