Primer CSS Extended Negative 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 Negative Margins. Primer CSS Extended Negative Margins are used to provide extended negative margins to the top and bottom of an item and its range is from 1 to 12.

Extended Negative Margins Used Class:

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

Syntax:

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

Negative margins can also be used responsively based upon breakpoints.

Syntax:

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

[direction]: This value can be either ;
- t: Indicates top margins
- b: Indicates bottom margins
[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 0 to 12 which indicates how much margin we want.
- 0: Provides Margin of 0px
- 1: Provides Margin of -4px
- 2: Provides Margin of -8px
- 3: Provides Margin of -16px
- 4: Provides Margin of -24px
- 5: Provides Margin of -32px
- 6: Provides Margin of -40px
- 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 negative 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 Negative Margins</h3> 
    <br><br> 
    Hi Geek!! 
    <div class="color-bg-success" 
        style="padding:1%;width:50%"> 
        <div class="mb-n12 color-bg-danger "> 
            GeeksforGeeks Bottom Extended Negative Margin 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will show negative 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 Negative Margins</h3> 
    <br><br> 
    Hi Geek!! 
    <div class="color-bg-success" 
        style="padding:1%;width:50%"> 
        <div class="mt-n9 color-bg-danger "> 
            GeeksforGeeks Top Extended Negative Margin 
        </div> 
    </div> 
</body> 
  
</html>