Primer CSS Extended Vertical Margins

Last Updated : 27 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.

In this article, we will learn about Primer CSS Extended Vertical Margins. Primer CSS Extended Vertical Margins are used to provide extended vertical margins to the top and bottom of an item.

Extended Vertical Margins Used Class:

m[direction]-[spacer]: This class is used to provide extended vertical margin in a particular direction.

Syntax:

<div class="m[direction]-[spacer]">
     Content
</div>

Extended Vertical margins can also be used responsively based upon breakpoints.

The syntax for Responsive Extended Vertical Margins:

<div class="m[direction]-[breakpoint]-[spacer]" >
    Content
</div>

[direction]: This value can be either
- t: Indicates top margins
- b: Indicates bottom margins
- y: Indicates both top and bottom
[breakpoint]: This value can be used to represent
- sm: Small devices
- md: Medium devices
- lg: Large Devices
- xl: Extra Large devices
[spacer]: This value varies from 7 to 12 which indicates how much margin we want.
- 7: Provides Margin of 48px
- 8: Provides Margin of 64px
- 9: Provides Margin of 80px
- 10: Provides Margin of 96px
- 11: Provides Margin of 112px
- 12: Provides Margin of 128px

Example 1: In this example, we will show extended vertical margins in the bottom direction.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" content= 
        "width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> 
</head> 
  
<body style="padding:4%;"> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Primer CSS Extended Vertical Margins</h3> 
    <br><br> 
    Hi Geek!! 
    <div class="color-bg-success" 
        style="padding:1%;width:50%"> 
        <div class="mb-9 color-bg-danger "> 
            GeeksforGeeks Bottom Extended Vertical Margin 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will show extended vertical margins in the top direction.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" content= 
        "width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> 
</head> 
  
<body style="padding:4%;"> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Primer CSS Extended Vertical Margins</h3> 
    <br><br> 
    Hi Geek!! 
    <div class="color-bg-success" 
        style="padding:1%;width:50%"> 
        <div class="mt-9 color-bg-danger "> 
            GeeksforGeeks Top Extended Vertical Margin 
        </div> 
    </div> 
</body> 
  
</html>