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 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.

Output:

 

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

Output:

 

Reference link: https://primer.style/css/utilities/padding