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.
<!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.
<!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