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>
Output:
Output
Reference: https://primer.style/css/utilities/padding#directional-padding
Similar Reads
Primer CSS Directional Margins
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. It is highly reusable and flexible. It is created with GitHub’s design system. Margins are required to set each tag position. Prime
2 min read
Primer CSS Padding
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 b
3 min read
Primer CSS Box Padding Density
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
2 min read
CSS | padding-inline Property
The padding-inline property in CSS is used to define the logical inline start and end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline: length|percentage|auto|inherit|initial|unset; Prope
2 min read
Primer CSS Flexbox Flex Direction
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. Primer CSS Flexbox flex-direction is
2 min read
CSS | padding-inline-end Property
The padding-inline-end property in CSS is used to define the logical block end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline-end: length|percentage|auto|inherit|initial|unset; Property
2 min read
CSS direction Property
The direction property in CSS is all about setting the text direction within any block element. It offers two values: rtl (right to left) and ltr (left to right), giving you control over the flow of your text.Syntax: element_selector { direction: rtl|ltr|initial|inherit;} Default Value: ltr Property
2 min read
Primer CSS Tooltip Direction
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
4 min read
CSS flex-direction Property
The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main axis of the flexible items. The main axis can be horizontal or vertical, depending on the value of the flex-direction property.Note: The flex-direction property only works on flexible items. With
5 min read
Primer CSS Uniform Padding
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
2 min read