Primer CSS Directional 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. 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.

Output:

👁 Image

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

Output: Margin is applied in all four directions as shown in the image.

👁 Image

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