Primer CSS Directional Margins

Last Updated : 11 May, 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 directions to margins. Every direction has a special name defined. It can be applied with scaling from 0 to 6.

Directional margin classes:

mt-6: To set the top margin, we use the “mt” class.
mr-6: To set the right margin, we use the “mr” class.
mb-6: To set the bottom margin, we use the “mb” class.
ml-6: To set the left margin, we use the “ml” class.
mx-6: Use this class to set horizontal, left, and right properties.
my-6: Use this class to set vertical, top, and bottom properties.

Note: In the above classes, scaling 6 is used. The developer can use scaling from 1 to 5 as per the application’s need.

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

Example 1: This example demonstrates the Primer CSS directional margins in four directions.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Primer CSS Directional margins</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 Directional margins</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 directional margins

Example 2: This example demonstrates the Primer CSS directional margins.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Primer CSS Directional margins</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
<body style="margin:50px"> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3><u>Primer CSS Directional margins</u></h3><br /> 
    </div> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="color-bg-attention"> 
            <div class="mt-6 mr-6 mb-6 ml-6 color-bg-subtle"> 
               Centered Text 
            </div> 
        </div> 
    </div>        
</body> 
</html>