Primer CSS Margin Naming Convention

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

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.

👁 Image

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

Output:

👁 Image

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