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

Padding

The padding sets the padding property. It controls the space inside an element between its content and border. 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).
CSS Shortcut class Applied style Legacy property 
p-<value>
 
padding: var(--gcds-spacing-<value>);
 
padding
 
pt-<value>
 
padding-block-start: var(--gcds-spacing-<value>);
 
padding-top
 
pb-<value>
 
padding-block-end: var(--gcds-spacing-<value>);
 
padding-bottom
 
ps-<value>
 
padding-inline-start: var(--gcds-spacing-<value>);
 
padding-left
 
pe-<value>
 
padding-inline-end: var(--gcds-spacing-<value>);
 
padding-right
 
px-<value>
 
padding-inline: var(--gcds-spacing-<value>);
 
padding-left + padding-right
 
py-<value>
 
padding-block: var(--gcds-spacing-<value>);
 
padding-top + padding-bottom

Examples

All sides
p-<value>

This element has no padding on all sides.

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

Top side
pt-<value>

This element has a padding of —gcds-spacing-300 on the top side. 

<p class="pt-300">
  This element has a padding of —gcds-spacing-300 on the top
  side.
</p>

Bottom side
pb-<value>

This element has a padding of —gcds-spacing-300 on the bottom side. 

<p class="pb-300">
  This element has a padding of —gcds-spacing-300 on the
  bottom side.
</p>

Left side
ps-<value>

This element has no padding on the left side.

<p class="p-300 ps-0">
  This element has no padding on the left side.
</p>

Right side
pe-<value>

This element has no padding on the right side.

<p class="p-300 pe-0">
  This element has no padding on the right side.
</p>

Horizontal sides
px-<value>

This element has a padding of —gcds-spacing-600 on the left and right sides. 

<p class="px-600">
  This element has a padding of —gcds-spacing-600 on the
  left and right sides.
</p>

Vertical sides
py-<value>

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

<p class="py-500">
  This element has a padding of —gcds-spacing-500 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:p-300 ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01