Primer CSS Uniform Padding Last Updated : 19 Apr, 2022 Comments Improve Suggest changes Like Article Like 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 Comment More infoAdvertise with us Next Article Primer CSS Uniform Padding M mishrapriyank17 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Uniform 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 3 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 be 3 min read Primer CSS Responsive Padding Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture i 3 min read Primer CSS Responsive Container Padding Primer CSS is a free open-source CSS framework based on concepts that set the foundation for basic design components such as space, font, and color. Because of their systematic structure, these patterns are both stable and interoperable. Its CSS approach is informed by Object-Oriented CSS concepts, 3 min read Primer CSS Margin Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.In this article, we'll s 3 min read Primer CSS Directional 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 4 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 | Scroll Padding The Scroll Padding property is an inbuilt property in Scroll Snap module. This property sets the scroll padding longhands. This property acts as a magnet on the top of the sliding element that sticks to the top of the viewport and stops the scrolling(forcefully) in that place. The Scroll Padding pro 2 min read Primer CSS Reset Margins Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website. In this article, we will be seeing Primer CSS Reset Margins. T 3 min read CSS | padding-block-start Property The padding-block-start property is used to define the logical block start padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-block-start: length|percentage|auto|inherit|initial|unset; Property va 2 min read Like