Primer CSS Margin Naming Convention

Last Updated : 01 Jun, 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. It is highly reusable and flexible. It is created with GitHub’s design system.

Margins are required to set each tag position. Primer CSS has special classes defined for applying suitable margins. Every class has a special name defined. Let us see all the names and its meaning :

m: To provide margin to a tag we use the “m” class.

Direction classes:

t: To set the top margin we use the “t” class.
r: To set the right margin we use the “r” class.
b: To set the bottom margin we use the “b” class.
l: To set the left margin we use the “l” class.
x: To set horizontal, left & right properties through this class.
y: To set vertical, top & bottom properties through this class.

Size classes:

0	1	2	3	4	5	6	7	8	9	10	11	12
0px	4px	8px	16px	24px	32px	40px	48px	64px	80px	96px	112px	128px

Syntax:

<div class= "m *direction - *scaling">
    . . .UI elements
</div>

Let us see the application of these classes in the following examples:

Example 1: This example demonstrates the primer CSS naming convention margin.

Margin Top : 24px through mt-4 class
Margin Left : 40px through ml-6 class

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Primer CSS Naming Convention Margin</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
<body class="mx-6"> 
    <div class="color-bg-attention"> 
        <h1 class="color-bg-subtle mt-4 ml-6 mb-4 color-fg-success"> 
            GeeksforGeeks 
        </h1> 
    </div> 
</body> 
</html>

Output: You can see the margin applied to head in the image. GeeksforGeeks is shifted “24-px” from the top and “40- px” to the left so is the text showing the CSS on the web page.

Shifted Heading

Example 2: This example demonstrates the primer CSS naming convention margin.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Naming convention margin</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3><u>Primer CSS Naming convention margin</u></h3> 
        <br/> 
    </div> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="color-bg-subtle"> 
            <div class="mt-6  color-bg-attention"> 
                Margin top 
            </div> 
        </div> 
            
        <div class="color-bg-subtle"> 
            <div class="ml-6  color-bg-attention"> 
                Margin left 
            </div> 
        </div> 
            
        <div class="color-bg-subtle"> 
            <div class="mr-6  color-bg-attention"> 
                Margin right 
            </div> 
        </div> 
            
        <div class="color-bg-subtle"> 
            <div class="mb-6  color-bg-attention"> 
                Margin bottom 
            </div> 
        </div> 
                
    </div>        
</body> 
</html>