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.
<!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=
</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.
<!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=
</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