Skip to content
Related Articles

Related Articles

Primer CSS Margin Naming Convention

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Jun, 2022
View Discussion
Improve Article
Save Article

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>


Output:

Primer CSS Margin

Reference:  https://primer.style/css/utilities/margin#naming-convention


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!