Primer CSS Extended Directional Padding

Last Updated : 16 May, 2022

Primer CSS is a free open-source CSS framework built on principles that lay the inspiration for fundamental design elements including space, font, and color. These patterns are both robust and interoperable due to their methodical structure. Object-Oriented CSS ideas, basic CSS, and BEM architecture define its CSS approach. It's quite versatile and reusable. It was created using the GitHub design system.

Padding is a CSS technique for increasing the amount of space surrounding an element's inner contents within any border that surrounds it. Primer CSS uses the global spacing scale to decide how much padding will be added, ensuring that the horizontal and vertical padding is consistent. We may use this tool to generate different layouts with the same styles since it helps us reduce the amount of custom CSS with the same characteristics. In Directional Padding, we can add padding in any direction we desire and can be used with a spacing scale of 0-6. But in Extended Directional Padding, we can increase the padding furthermore to the spacing scale of 7 to 12. It works in all the responsive variants except the px.

Used Classes:

pt-[7-12]: This class adds padding to the top of an element it is added to and we can vary the amount of it from spacer value 7-12.
pb-[7-12]: This class adds padding to the bottom of an element it is added to and we can vary the amount of it from spacer value 7-12.
pr-[7-12]: This class adds padding to the right of an element it is added to and we can vary the amount of it from spacer value 7-12.
pl-[7-12]: This class adds padding to the left of an element it is added to and we can vary the amount of it from spacer value 7-12.
py-[7-12]: This class adds padding to the top and bottom of an element it is added to and we can vary the amount of it from spacer value 7-12.

Note: px-[7-12] doesn't work because extended padding doesn't work on the left and right sides of an element.

Syntax:

<div class="pt-7">
        . . . .
</div>

Example 1: This example illustrates the addition of padding to the right and left sides of an element with spacer scale values of 8 and 10 respectively.

HTML

<!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">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
       rel="stylesheet"/>
    <title>Primer CSS Extended Directional Padding</title>
</head>
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Extended Directional Padding</h3>
        <br/> 
    </div>
    <div class="pr-8 pl-10 color-bg-open-emphasis 
                d-inline-block m-3">
        <div class="color-bg-subtle p-1">
            I have padding on right and left!
        </div>
    </div>
</body>
</html>

Output:

Example 2: This example illustrates the addition of padding to the top and bottom of an element with spacer scale values of 7 and 9 respectively.

HTML

<!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">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
       rel="stylesheet" />
    <title>Primer CSS Extended Directional Padding</title>
</head>
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Extended Directional Padding</h3>
        <br/> 
    </div>
    <div class="pt-7 pb-9 color-bg-open-emphasis 
                d-inline-block m-4">
        <div class="color-bg-subtle p-1">
           I have padding on right and left!
          </div>
    </div>
</body>
</html>

Output:

Reference: https://primer.style/css/utilities/padding#extended-directional-padding

priyanshuchatterjee01

Improve

Article Tags :

Primer CSS Extended Directional Padding

Similar Reads

Thank You!

What kind of Experience do you want to share?