Open In App

Primer CSS Shorthand Padding

Last Updated : 16 May, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free, open-source CSS framework based on design concepts which is the foundation of design elements like space, typography, and color. Due to their logical nature, these patterns are both robust and interoperable. Its CSS approach is defined by Object-Oriented CSS concepts, basic CSS, and the BEM architecture. It has a lot of uses and can be reused. The GitHub design system was used to make it.

Padding is a CSS property that allows you to increase space around an element’s inner contents inside any border that surrounds it. Primer CSS utilizes the global spacing scale to calculate how much padding to add, ensuring consistent horizontal and vertical padding. Using this tool, we can develop alternative layouts with the same styles, as it decreases the amount of custom CSS with the same characteristics.

Shorthand is nothing but a naming strategy used to name the different padding utility variations. We employ a shorthand naming strategy to make class names concise because padding utilities have several versions and will be used in many locations.

Shorthand Symbols used for the padding utilities and their descriptions:

  • p: padding
  • r: right side
  • l: left side
  • t: top section
  • b: bottom section
  • x: the x-axis, both the left and right sides
  • y: the y-axis, both the left and right sides 
  • 0: 0px
  • 1: 4px
  • 2: 8px
  • 3: 16px
  • 4: 24px
  • 5: 32px
  • 6: 40px
  • 7: 48px
  • 8: 64px
  • 9: 80px
  • 10: 96px
  • 11: 112px
  • 12: 128px

Used Classes:

  • p[r/l/t/b/x/y]-[0-12]: We use this format with different shorthand symbols for values and direction to create different variations of the padding utilities such as px-5. This example adds 32px padding in the x-axis.
Syntax:
<div class="px-5">
    ...
</div>

Example 1: This example shows how we can add 40px padding on the top and right sides and an element using the shorthand symbols like t, r, and 6(40px).

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 Shorthand Padding</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
          
        <h3>Primer CSS Shorthand Padding</h3>
        <br />
    </div>
  
    <div class="pt-6 pr-6 color-bg-open-emphasis 
        d-inline-block m-4">
        <div class="color-bg-subtle p-1">
            GeeksforGeeks
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: This example shows how we can add 64px and 40px padding to the x and y-axis respectively and an element using the shorthand symbols like x, y, 6, and 8(64px).

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 Shorthand Padding</title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success"
            GeeksforGeeks
        </h1>
        <h3>Primer CSS Shorthand Padding</h3>
        <br />
    </div>
      
    <div class="px-6 py-8 color-bg-open-emphasis 
                d-inline-block m-4">
        <div class="color-bg-subtle p-1">
            GeeksforGeeks
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/utilities/padding#shorthand



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads