CSS padding-right

The CSS padding-right property is used to create the right padding for a 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?

In the CSS styles, we have defined a selector .myd which selects the element with the class name myd in the HTML document. The selector applies the border: 2px solid coral; property to create a 2-pixel wide border around the element with a color of coral. Additionally, the selector applies the padding-right: 32px; property to add 32 pixels of padding to the right side of the element's content box.

In the HTML body, we have a single <div> element with the class name myd. The CSS selector .myd applies the defined styles to the <div> element, which adds a 2-pixel wide coral border around the element and adds 32 pixels of padding to the right side of the element's content box.

Therefore, the output of this code would be a <div> element with a coral-colored border and 32 pixels of padding on the right side of the element's content box. The text content of the <div> element would flow within the element's content box and be unaffected by the border or padding.

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

CSS padding-right syntax

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

padding-right: x;

The value of x should be any of the following:

Note: To learn about padding in detail, refer to its separate post.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!