Primer CSS Padding

Last Updated : 28 May, 2025

Padding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.

Primer CSS Padding:

Shorthand: Padding has many variations, that can be used in many places, shorthand naming convention to help us to remember the class names.
Uniform padding: This utility can be used with a spacing scale from 0-6 using classes p-0,p-1, and so on.
Directional padding: This utility can change or override default padding, and can be used with a spacing scale of 0-6. This applies padding to individual sides of the X-axis and Y-axis of the element.
Extended directional padding: This extended directional padding scale starts from spacer 7 and goes up to 12 using classes pt-7,pt-8, and so on. All directions and their responsive variants are supported, except for px.
Responsive padding: This utility can be used as per breakpoint using the following formula, p-[direction]-[breakpoint]-[spacer]. Each responsive style is applied to the specified breakpoint and up.
Responsive container padding: It is intended to be used with container styles. The padding is added on the left and right sides of an element using the p-responsive class.

Syntax:

<div class="Primer-CSS-Padding-Type">o
   ...
</div>

Example 1: The following code demonstrates the uniform padding utilities using the required classes in it.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Typography</title>
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
<body>
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <strong>Primer CSS Padding</strong>
    </center>
    <strong>p-0:</strong>
    <div class="p-0 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-1:</strong>
    <div class="p-1 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-2:</strong>
    <div class="p-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-3:</strong>
    <div class="p-3 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-4:</strong>
    <div class="p-4 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-5:</strong>
    <div class="p-5 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>p-6:</strong>
    <div class="p-6 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>    
</body>
</html>

Output:

Example 2: The following code demonstrates the directional padding utilities.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Padding</title>
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
<body class="p-2">
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <strong>Primer CSS Padding</strong>
    </center>
    <strong>pt-2:</strong>
    <div class="pt-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>pr-2:</strong>
    <div class="pr-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>pb-2:</strong>
    <div class="pb-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>pl-2:</strong>
    <div class="p-3 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>py-2:</strong>
    <div class="py-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
    <strong>px-2:</strong>
    <div class="px-2 color-bg-success">
        I am the Outer Box
        <div class="border-green-800 p-2 color-bg-success-emphasis">
              I am the inner box
        </div>
    </div>
</body>
</html>

Output:

Primer CSS Typography

skyridetim

Improve

Article Tags :

Primer CSS Padding

Similar Reads

Primer CSS Utility

Primer CSS Components

Primer CSS Marketing

Thank You!

What kind of Experience do you want to share?