GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Margin

The margin class sets the margin property. It controls the space outside the border of an element. Logical properties adapt to the writing mode and text direction. Instead of literal directions like "left", "right", "top", or "bottom", they use flow-relative terms.This flexibility prepares layouts for internationalization without needing manual adjustments for different text directions. Overview The value can be either one of our predefined spacing tokens (0 - 1250) or auto.
CSS Shortcut class Applied style Legacy property 
m-<value>
 
margin: var(--gcds-spacing-<value>);
 
margin
 
mt-<value>
 
margin-block-start: var(--gcds-spacing-<value>);
 
margin-top
 
mb-<value>
 
margin-block-end: var(--gcds-spacing-<value>);
 
margin-bottom
 
ms-<value>
 
margin-inline-start: var(--gcds-spacing-<value>);
 
margin-left
 
me-<value>
 
margin-inline-end: var(--gcds-spacing-<value>);
 
margin-right
 
mx-<value>
 
margin-inline: var(--gcds-spacing-<value>);
 
margin-left + margin-right
 
my-<value>
 
margin-block: var(--gcds-spacing-<value>);
 
margin-top + margin-bottom

Examples

All sides
m-<value>

This element has no margin on all sides.

<p class="m-0">This element has no margin on all sides.</p>

Top side
mt-<value>

This element lets the browser automatically calculate the margin on the top side. 

<p class="mt-auto">
  This element lets the browser automatically calculate the
  margin on the top side.
</p>

Bottom side
mb-<value>

This element has a margin of —gcds-spacing-900 on the bottom side. 

<p class="mb-900">
  This element has a margin of —gcds-spacing-900 on the
  bottom side.
</p>

Left side
ms-<value>

This element has no margin on the left side.

<p class="m-900 ms-0">
  This element has no margin on the left side.
</p>

Right side
me-<value>

This element has no margin on the right side.

<p class="m-900 me-0">
  This element has no margin on the right side.
</p>

Horizontal sides
mx-<value>

This element is horizontally centred by letting the browser automatically calculate the margin. 

<p class="container-md mx-auto">
  This element is horizontally centred by letting the
  browser automatically calculate the margin.
</p>

Vertical sides
my-<value>

This element has a margin of —gcds-spacing-900 on the top and bottom sides. 

<p class="my-900">
  This element has a margin of —gcds-spacing-900 on the top
  and bottom sides.
</p>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:m-300 ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01