Primer CSS Negative Margins

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.

Output:

Example 2: Below example demonstrates a responsive negative margin.

Output:

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