# Margin Utilities for controlling the margin of an element. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-margin--introduction ## Variants documented in Storybook - Showcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-margin--showcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Margin. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Margin Utilities Reference

A complete reference of all margin utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Margin (All Sides)

Format: ux4g-{property}{side}-{size}

margin-none (0px) ux4g-m-none
margin-2xs (4px) ux4g-m-2xs
margin-xs (8px) ux4g-m-xs
margin-s (12px) ux4g-m-s
margin-m (16px) ux4g-m-m
margin-l (20px) ux4g-m-l
margin-xl (24px) ux4g-m-xl
margin-2xl (32px) ux4g-m-2xl
margin-auto (auto) ux4g-m-auto

Margin Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

margin-x-none (0px) ux4g-mx-none
margin-x-2xs (4px) ux4g-mx-2xs
margin-x-xs (8px) ux4g-mx-xs
margin-x-s (12px) ux4g-mx-s
margin-x-m (16px) ux4g-mx-m
margin-x-l (20px) ux4g-mx-l
margin-x-xl (24px) ux4g-mx-xl
margin-x-2xl (32px) ux4g-mx-2xl
margin-x-auto (auto) ux4g-mx-auto
margin-y-none (0px) ux4g-my-none
margin-y-2xs (4px) ux4g-my-2xs
margin-y-xs (8px) ux4g-my-xs
margin-y-s (12px) ux4g-my-s
margin-y-m (16px) ux4g-my-m
margin-y-l (20px) ux4g-my-l
margin-y-xl (24px) ux4g-my-xl
margin-y-2xl (32px) ux4g-my-2xl
margin-y-auto (auto) ux4g-my-auto

Directional Margin (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

margin-top-none (0px) ux4g-mt-none
margin-top-2xs (4px) ux4g-mt-2xs
margin-top-xs (8px) ux4g-mt-xs
margin-top-s (12px) ux4g-mt-s
margin-top-m (16px) ux4g-mt-m
margin-top-l (20px) ux4g-mt-l
margin-top-xl (24px) ux4g-mt-xl
margin-top-2xl (32px) ux4g-mt-2xl
margin-top-auto (auto) ux4g-mt-auto
margin-bottom-none (0px) ux4g-mb-none
margin-bottom-2xs (4px) ux4g-mb-2xs
margin-bottom-xs (8px) ux4g-mb-xs
margin-bottom-s (12px) ux4g-mb-s
margin-bottom-m (16px) ux4g-mb-m
margin-bottom-l (20px) ux4g-mb-l
margin-bottom-xl (24px) ux4g-mb-xl
margin-bottom-2xl (32px) ux4g-mb-2xl
margin-bottom-auto (auto) ux4g-mb-auto
margin-left-none (0px) ux4g-ml-none
margin-left-2xs (4px) ux4g-ml-2xs
margin-left-xs (8px) ux4g-ml-xs
margin-left-s (12px) ux4g-ml-s
margin-left-m (16px) ux4g-ml-m
margin-left-l (20px) ux4g-ml-l
margin-left-xl (24px) ux4g-ml-xl
margin-left-2xl (32px) ux4g-ml-2xl
margin-left-auto (auto) ux4g-ml-auto
margin-right-none (0px) ux4g-mr-none
margin-right-2xs (4px) ux4g-mr-2xs
margin-right-xs (8px) ux4g-mr-xs
margin-right-s (12px) ux4g-mr-s
margin-right-m (16px) ux4g-mr-m
margin-right-l (20px) ux4g-mr-l
margin-right-xl (24px) ux4g-mr-xl
margin-right-2xl (32px) ux4g-mr-2xl
margin-right-auto (auto) ux4g-mr-auto
``` React: ```jsx import React from 'react'; const MarginExample1Demo = () => ( <>
Utilities

Margin Utilities Reference

A complete reference of all margin utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Margin All */}

Margin (All Sides)

Format: ux4g-{property}{side}-{size}

margin-none (0px) ux4g-m-none
margin-2xs (4px) ux4g-m-2xs
margin-xs (8px) ux4g-m-xs
margin-s (12px) ux4g-m-s
margin-m (16px) ux4g-m-m
margin-l (20px) ux4g-m-l
margin-xl (24px) ux4g-m-xl
margin-2xl (32px) ux4g-m-2xl
margin-auto (auto) ux4g-m-auto
{/* Margin Axis */}

Margin Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

margin-x-none (0px) ux4g-mx-none
margin-x-2xs (4px) ux4g-mx-2xs
margin-x-xs (8px) ux4g-mx-xs
margin-x-s (12px) ux4g-mx-s
margin-x-m (16px) ux4g-mx-m
margin-x-l (20px) ux4g-mx-l
margin-x-xl (24px) ux4g-mx-xl
margin-x-2xl (32px) ux4g-mx-2xl
margin-x-auto (auto) ux4g-mx-auto
margin-y-none (0px) ux4g-my-none
margin-y-2xs (4px) ux4g-my-2xs
margin-y-xs (8px) ux4g-my-xs
margin-y-s (12px) ux4g-my-s
margin-y-m (16px) ux4g-my-m
margin-y-l (20px) ux4g-my-l
margin-y-xl (24px) ux4g-my-xl
margin-y-2xl (32px) ux4g-my-2xl
margin-y-auto (auto) ux4g-my-auto
{/* Directional Margin */}

Directional Margin (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

margin-top-none (0px) ux4g-mt-none
margin-top-2xs (4px) ux4g-mt-2xs
margin-top-xs (8px) ux4g-mt-xs
margin-top-s (12px) ux4g-mt-s
margin-top-m (16px) ux4g-mt-m
margin-top-l (20px) ux4g-mt-l
margin-top-xl (24px) ux4g-mt-xl
margin-top-2xl (32px) ux4g-mt-2xl
margin-top-auto (auto) ux4g-mt-auto
margin-bottom-none (0px) ux4g-mb-none
margin-bottom-2xs (4px) ux4g-mb-2xs
margin-bottom-xs (8px) ux4g-mb-xs
margin-bottom-s (12px) ux4g-mb-s
margin-bottom-m (16px) ux4g-mb-m
margin-bottom-l (20px) ux4g-mb-l
margin-bottom-xl (24px) ux4g-mb-xl
margin-bottom-2xl (32px) ux4g-mb-2xl
margin-bottom-auto (auto) ux4g-mb-auto
margin-left-none (0px) ux4g-ml-none
margin-left-2xs (4px) ux4g-ml-2xs
margin-left-xs (8px) ux4g-ml-xs
margin-left-s (12px) ux4g-ml-s
margin-left-m (16px) ux4g-ml-m
margin-left-l (20px) ux4g-ml-l
margin-left-xl (24px) ux4g-ml-xl
margin-left-2xl (32px) ux4g-ml-2xl
margin-left-auto (auto) ux4g-ml-auto
margin-right-none (0px) ux4g-mr-none
margin-right-2xs (4px) ux4g-mr-2xs
margin-right-xs (8px) ux4g-mr-xs
margin-right-s (12px) ux4g-mr-s
margin-right-m (16px) ux4g-mr-m
margin-right-l (20px) ux4g-mr-l
margin-right-xl (24px) ux4g-mr-xl
margin-right-2xl (32px) ux4g-mr-2xl
margin-right-auto (auto) ux4g-mr-auto
); export default MarginExample1Demo; ``` Angular: ```html
Utilities

Margin Utilities Reference

A complete reference of all margin utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Margin (All Sides)

Format: ux4g-{property}{side}-{size}

margin-none (0px) ux4g-m-none
margin-2xs (4px) ux4g-m-2xs
margin-xs (8px) ux4g-m-xs
margin-s (12px) ux4g-m-s
margin-m (16px) ux4g-m-m
margin-l (20px) ux4g-m-l
margin-xl (24px) ux4g-m-xl
margin-2xl (32px) ux4g-m-2xl
margin-auto (auto) ux4g-m-auto

Margin Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

margin-x-none (0px) ux4g-mx-none
margin-x-2xs (4px) ux4g-mx-2xs
margin-x-xs (8px) ux4g-mx-xs
margin-x-s (12px) ux4g-mx-s
margin-x-m (16px) ux4g-mx-m
margin-x-l (20px) ux4g-mx-l
margin-x-xl (24px) ux4g-mx-xl
margin-x-2xl (32px) ux4g-mx-2xl
margin-x-auto (auto) ux4g-mx-auto
margin-y-none (0px) ux4g-my-none
margin-y-2xs (4px) ux4g-my-2xs
margin-y-xs (8px) ux4g-my-xs
margin-y-s (12px) ux4g-my-s
margin-y-m (16px) ux4g-my-m
margin-y-l (20px) ux4g-my-l
margin-y-xl (24px) ux4g-my-xl
margin-y-2xl (32px) ux4g-my-2xl
margin-y-auto (auto) ux4g-my-auto

Directional Margin (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

margin-top-none (0px) ux4g-mt-none
margin-top-2xs (4px) ux4g-mt-2xs
margin-top-xs (8px) ux4g-mt-xs
margin-top-s (12px) ux4g-mt-s
margin-top-m (16px) ux4g-mt-m
margin-top-l (20px) ux4g-mt-l
margin-top-xl (24px) ux4g-mt-xl
margin-top-2xl (32px) ux4g-mt-2xl
margin-top-auto (auto) ux4g-mt-auto
margin-bottom-none (0px) ux4g-mb-none
margin-bottom-2xs (4px) ux4g-mb-2xs
margin-bottom-xs (8px) ux4g-mb-xs
margin-bottom-s (12px) ux4g-mb-s
margin-bottom-m (16px) ux4g-mb-m
margin-bottom-l (20px) ux4g-mb-l
margin-bottom-xl (24px) ux4g-mb-xl
margin-bottom-2xl (32px) ux4g-mb-2xl
margin-bottom-auto (auto) ux4g-mb-auto
margin-left-none (0px) ux4g-ml-none
margin-left-2xs (4px) ux4g-ml-2xs
margin-left-xs (8px) ux4g-ml-xs
margin-left-s (12px) ux4g-ml-s
margin-left-m (16px) ux4g-ml-m
margin-left-l (20px) ux4g-ml-l
margin-left-xl (24px) ux4g-ml-xl
margin-left-2xl (32px) ux4g-ml-2xl
margin-left-auto (auto) ux4g-ml-auto
margin-right-none (0px) ux4g-mr-none
margin-right-2xs (4px) ux4g-mr-2xs
margin-right-xs (8px) ux4g-mr-xs
margin-right-s (12px) ux4g-mr-s
margin-right-m (16px) ux4g-mr-m
margin-right-l (20px) ux4g-mr-l
margin-right-xl (24px) ux4g-mr-xl
margin-right-2xl (32px) ux4g-mr-2xl
margin-right-auto (auto) ux4g-mr-auto
``` ### 2. Showcase — Margin (All Sides) HTML: ```html
m-none
m-2xs
m-xs
m-s
m-m
m-l
m-xl
m-2xl
``` React: ```jsx import React from 'react'; const MarginExample2Demo = () => ( <>
m-none
m-2xs
m-xs
m-s
m-m
m-l
m-xl
m-2xl
); export default MarginExample2Demo; ``` Angular: ```html
m-none
m-2xs
m-xs
m-s
m-m
m-l
m-xl
m-2xl
``` ### 3. Showcase — Horizontal Margin HTML: ```html
mx-none
mx-2xs
mx-xs
mx-s
mx-m
mx-l
mx-xl
mx-2xl
``` React: ```jsx import React from 'react'; const MarginExample3Demo = () => ( <>
mx-none
mx-2xs
mx-xs
mx-s
mx-m
mx-l
mx-xl
mx-2xl
); export default MarginExample3Demo; ``` Angular: ```html
mx-none
mx-2xs
mx-xs
mx-s
mx-m
mx-l
mx-xl
mx-2xl
``` ### 4. Showcase — Vertical Margin HTML: ```html
my-none
my-2xs
my-xs
my-s
my-m
my-l
my-xl
my-2xl
``` React: ```jsx import React from 'react'; const MarginExample4Demo = () => ( <>
my-none
my-2xs
my-xs
my-s
my-m
my-l
my-xl
my-2xl
); export default MarginExample4Demo; ``` Angular: ```html
my-none
my-2xs
my-xs
my-s
my-m
my-l
my-xl
my-2xl
``` ### 5. Showcase — Auto Margins (Alignment) HTML: ```html
mx-auto
Start
ml-auto
mr-auto
End
``` React: ```jsx import React from 'react'; const MarginExample5Demo = () => ( <> {/* Horizontal Centering */}
mx-auto
{/* Push to End */}
Start
ml-auto
{/* Push to Start */}
mr-auto
End
); export default MarginExample5Demo; ``` Angular: ```html
mx-auto
Start
ml-auto
mr-auto
End
``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.