Primer CSS Directional Padding

Last Updated : 19 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

Padding is used to create space around the element, inside any defined border. There are different types of padding in the Primer CSS such as shorthand padding, uniform padding, directional padding, extended directional padding, responsive padding, and much more. In this article, we will discuss the Directional padding in Primer CSS.

Directional padding uses directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding and can be used with a spacing scale of 0-6.

Primer CSS Directional padding used classes:

.pt-(0-6): This class is used to create padding on the top of the container.
.pr-(0-6): This class is used to create padding on the right of the container.
.pb-(0-6): This class is used to create padding on the bottom of the container.
.pl-(0-6): This class is used to create padding on the left of the container.
.py-(0-6): This class is used to create padding on the top and bottom of the container.
.px-(0-6): This class is used to create padding on the left and right of the container.

Syntax:

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

Example 1: This example demonstrates the top, bottom, left, and right padding class in Primer CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Primer CSS</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <strong>Primer CSS Directional Padding</strong> 
        <br> 
        <div class="pt-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-1</div> 
        </div> 
  
        <div class="pt-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-2</div> 
        </div> 
  
        <div class="pt-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-3</div> 
        </div> 
  
        <div class="pt-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-4</div> 
        </div> 
  
        <div class="pt-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-5</div> 
        </div> 
  
        <div class="pt-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.pt-6</div> 
        </div> 
        <br /> 
        <br /> 
        <br /> 
        <div class="pr-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-1</div> 
        </div> 
  
        <div class="pr-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-2</div> 
        </div> 
  
        <div class="pr-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-3</div> 
        </div> 
  
        <div class="pr-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-4</div> 
        </div> 
  
        <div class="pr-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-5</div> 
        </div> 
  
        <div class="pr-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pr-6</div> 
        </div> 
        <br /> 
        <br /> 
        <br /> 
        <div class="pb-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-1</div> 
        </div> 
          
        <div class="pb-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-2</div> 
        </div> 
          
        <div class="pb-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-3</div> 
        </div> 
          
        <div class="pb-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-4</div> 
        </div> 
          
        <div class="pb-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-5</div> 
        </div> 
          
        <div class="pb-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pb-6</div> 
        </div> 
        <br /> 
        <br /> 
        <br /> 
        <div class="pl-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-1</div> 
        </div> 
          
        <div class="pl-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-2</div> 
        </div> 
          
        <div class="pl-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-3</div> 
        </div> 
          
        <div class="pl-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-4</div> 
        </div> 
          
        <div class="pl-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-5</div> 
        </div> 
          
        <div class="pl-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.pl-6</div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Output

Example 2: This example demonstrates the tx and y-axis padding class in Primer CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Primer CSS</title> 
    <link  rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <strong>Primer CSS Directional Padding</strong> 
        <br> 
        <div class="px-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-1</div> 
        </div> 
  
        <div class="px-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-2</div> 
        </div> 
  
        <div class="px-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-3</div> 
        </div> 
  
        <div class="px-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-4</div> 
        </div> 
  
        <div class="px-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-5</div> 
        </div> 
  
        <div class="px-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-attention p-1">.px-6</div> 
        </div> 
        <br /> 
        <br /> 
        <br /> 
        <div class="py-1 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-1</div> 
        </div> 
  
        <div class="py-2 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-2</div> 
        </div> 
  
        <div class="py-3 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-3</div> 
        </div> 
  
        <div class="py-4 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-4</div> 
        </div> 
  
        <div class="py-5 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-5</div> 
        </div> 
  
        <div class="py-6 mr-3 color-bg-success d-inline-block"> 
            <div class="color-bg-subtle p-1">.py-6</div> 
        </div> 
    </center> 
</body> 
  
</html>