Primer CSS Uniform Margins

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.

Output:

👁 Image

Example 2: The example below shows how using uniform margin classes overrides the default or pre-applied margin on the element.

Output:

👁 Image

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