Primer CSS Box Padding Density
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. It is created with GitHub’s design system.
Primer CSS Box is used to display the content in the simple rounded corner box. Primer CSS Box Padding Density is used to change the padding density of the box elements. In this article, we will discuss Primer CSS Box Padding Density.
Primer CSS Box Padding Density Classes:
- Box--condensed: This class is used to reduce the vertical padding and condensed line-height.
- Box--spacious: This class is used to increase the padding and title font size.
Syntax:
<div class="Box Box-Padding-Density-Class">
...
</div>
Example 1: The following code demonstrates the Primer CSS Box Padding Density using Box--condensed class.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Box Padding Density </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Box Padding Density </h3>
</div><br><br>
<div class="Box Box--condensed">
<div class="Box-header">
<h4 class="Box-title">
GeeksforGeeks
</h4>
</div>
<div class="Box-row">
GFG Body
</div>
<div class="Box-row">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
</div>
<div class="Box-row">
A Computer Science portal for geeks
</div>
</div>
</body>
</html>
Output:
Primer CSS Box Padding Density using Box--condensed
Example 2: The following code demonstrates the Primer CSS Box Padding Density using Box--spacious class.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Box Padding Density </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Box Padding Density </h3>
</div> <br> <br>
<div class="Box Box--spacious">
<div class="Box-header">
<h4 class="Box-title">
GeeksforGeeks
</h4>
</div>
<div class="Box-row">
GFG Body
</div>
<div class="Box-row">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" >
</div>
<div class="Box-row">
A Computer Science portal for geeks
</div>
<div class="Box-row">
Portal for geeks
</div>
</div>
</body>
</html>
Output:
Primer CSS Box Padding Density using Box--spacious
Reference: https://primer.style/css/components/box#box-padding-density
Similar Reads
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 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
CSS | padding-block-end Property The padding-block-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-block-end: length|percentage|auto|inherit|initial|unset; Property v
2 min read
Primer CSS Box Elements 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 a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
CSS | padding-block Property The padding-block property in CSS is used to define the logical block 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-block: length|percentage|auto|inherit|initial|unset; Property
2 min read