Open In App

Primer CSS Negative Margins

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 16 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads