Skip to content
Related Articles

Related Articles

Primer CSS Negative Margins

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 May, 2022

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

In this article, we’ll see about Primer CSS Negative Margins. In this, we can add negative margins to the top, right, bottom, or left of an item just by including a negative margin utility. For using this utility, we use a formula: 

m[direction]-n[spacer]

Here, the spacer runs from 1 to 6. For adding responsiveness, use the following formula: 

m[direction]-[breakpoint]-n[spacer]

Primer CSS Negative Margins used class:

  • m[direction]-n[spacer]: This class is used to provide a negative margin in all four directions i.e, top, right, bottom, and left.
  • m[direction]-[breakpoint]-n[spacer]: This class is used to provide a negative margin with added breakpoints for responsiveness.

Syntax:

<div class="d-flex flex-justify-center">
  <div class="color-bg-attention">
    <div class="m-3 ml-n4 ml-md-n6 border-left 
      color-border-success color-bg-subtle p-2">
      .m-4 .ml-n5 .ml-md-n6
    </div>
  </div>
</div>

Example 1: Below example demonstrates a negative margin.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>Primer</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet"/>
</head>
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Negative Margin</h2>
    </div>
    <div class="d-flex flex-justify-center">
        <div class="color-bg-success">
            <div class="m-4 ml-n5 ml-md-n6 border-left 
                color-border-accent-emphasis  
                color-bg-success-emphasis p-2">
                .m-3 .ml-n4 .ml-md-n6
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: Below example demonstrates a responsive negative margin.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <title>Primer</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet"/>
</head>
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Negative Margin</h2>
    </div>
    <div class="m-4 color-bg-success d-inline-block">
        <div class="mx-sm-2 mx-md-4 
            color-bg-success-emphasis p-1">
            .mx-sm-4 .mx-md-6
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/utilities/margin#negative-margins


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!