CSS - padding-right

Description

The padding-right property is used to set the padding space on the right side of an element's content box.

Example

Here is an example where all the different values that can be passed to the padding-right property:

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding - padding-right</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h3>padding-right property</h3>
        <div>
            <p style="padding-right: 100px; border: 1px solid #0b0b0b;">This element has a right padding of 100px.</p>
            <p style="padding-right: 50%; border: 1px solid #0b0b0b;">This element has a right padding of 50%. This element has a right padding of 50%. This element has a right padding of 50%.</p>
            <p style="padding-right: 50pt; border: 1px solid #0b0b0b;">This element has a right padding of 30pt.</p>
        </div>
    </body>
</html>

inherit - when you want the right padding of a child element to match the right padding of its parent element, use the property inherit.

Note: inherit value can be used only on child elements and not on parent element.

Here is an example where the padding-right of a child element is inherited from the parent element−

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
   <head>
      <title>CSS - Padding - padding-right</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         .container {
            padding: 50px;
            border: 1px solid #4CAF50;
         	}
         .box {
            padding-right: inherit;
			   border: 1px solid #4CAF50;
         	}
      </style>
   </head>
   <body>
      <h4>padding-right property - inherit</h4>
        <div class="container">
            <div class="box">
                <p>The padding is 50px for parent element.</p>
                <p class="example">
                    A child element where the right padding is inherited from the parent (p) and is 50px.
                    A child element where the right padding is inherited from the parent (p) and is 50px.
                </p>
            </div>
        </div>
   </body>
</html>
Advertisements