Primer CSS Uniform Margins
Last Updated :
20 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 be seeing Primer CSS Uniform Margins. Margin utility provided by Primer CSS helps developers to write less custom CSS and helps to achieve many different page layouts using the same styles. Uniform margin utilities are used to apply equal margin to all sides of an element. The uniform margin utilities override default margins and can be used with a spacing scale of 0 to 6.
Primer CSS Uniform Margins Classes:
- m-0: This class is used to reset any default margin on an element.
- m-1: This class is used to set the margin of scale 1 on all sides of an element.
- m-2: This class is used to set the margin of scale 2 on all sides of an element.
- m-3: This class is used to set the margin of scale 3 on all sides of an element.
- m-4: This class is used to set the margin of scale 4 on all sides of an element.
- m-5: This class is used to set the margin of scale 5 on all sides of an element.
- m-6: This class is used to set the margin of scale 6 on all sides of an element.
Syntax:
<div class="m-3">
...
</div>
Example 1: The example below shows the use of uniform margin classes listed above.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Uniform Margin - Primer CSS</title>
<link rel="stylesheet" href=
<style>
.d-flex>div{
/* Margin to provide spacing between the div elements */
margin-top: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">GeeksforGeeks</h2>
<h4>Primer CSS - Uniform Margin</h4>
</div>
<div class="d-flex flex-justify-around flex-items-center flex-column">
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-6">
m-6
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-5">
m-5
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-4">
m-4
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-3">
m-3
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-2">
m-2
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-1">
m-1
</div>
</div>
<div class="color-bg-closed-emphasis">
<div class="color-bg-danger m-0">
m-0
</div>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Uniform Margins
Example 2: The example below shows how using uniform margin classes overrides the default or pre-applied margin on the element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Uniform Margin - Primer CSS</title>
<link rel="stylesheet" href=
<style>
.d-flex>p{
margin-top: 30px;
}
.gfg {
margin: 100px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 class="color-fg-success">GeeksforGeeks</h2>
<h4>Primer CSS - Uniform Margin</h4>
</div>
<div class="mt-3 d-flex flex-justify-around
flex-items-center flex-column">
<p><b>Element without uniform margin class:</b></p>
<div class="color-bg-closed-emphasis">
<div class="gfg color-bg-danger">
m-6
</div>
</div>
<p><b>Element with uniform margin class:</b></p>
<div class="color-bg-closed-emphasis">
<div class="gfg color-bg-danger m-6">
m-6
</div>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Uniform Margins
Reference: https://primer.style/css/utilities/margin#uniform-margins
Share your thoughts in the comments
Please Login to comment...