Open In App

Primer CSS Uniform Padding

Improve
Improve
Like Article
Like
Save
Share
Report

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 Uniform padding in Primer CSS.

Uniform padding uses uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0 to 6.

Primer CSS Uniform padding classes:

  • .p-(0-6): This class is used to create uniform padding on all sides of the container. The amount of padding is defined via the number after p- where 0 means the least padding and 6 means the highest padding.

Syntax:

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

Example 1: This example demonstrates the uniform 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 Uniform Padding</strong>
        <br>
        <div class="mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">
              Non Padded COntainer
            </div>
        </div>
  
        <div class="p-3 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">
              Uniform padded container
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

Primer CSS Uniform padding

Example 2: This example demonstrates the uniform padding from 0 scales to 6 scale 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 Uniform Padding</strong>
        <br>
        <div class="p-1 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-1</div>
        </div>
  
        <div class="p-2 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-2</div>
        </div>
  
        <div class="p-3 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-3</div>
        </div>
  
        <div class="p-4 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-4</div>
        </div>
  
        <div class="p-5 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-5</div>
        </div>
  
        <div class="p-6 mr-3 color-bg-success d-inline-block">
            <div class= "color-bg-attention p-1">.p-6</div>
        </div>
    </center>
</body>
  
</html>


Output:

Primer CSS Uniform padding

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



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads