Use the margin utility to change the spacing around an item.
Examples
Margin on all sides
.ds-u-margin--00px.ds-u-margin--054px.ds-u-margin--18px.ds-u-margin--216px.ds-u-margin--324px.ds-u-margin--432px.ds-u-margin--540px.ds-u-margin--648px.ds-u-margin--756pxMargin on left and right (x-axis)
.ds-u-margin-x--00px.ds-u-margin-x--054px.ds-u-margin-x--18px.ds-u-margin-x--216px.ds-u-margin-x--324px.ds-u-margin-x--432px.ds-u-margin-x--540px.ds-u-margin-x--648px.ds-u-margin-x--756pxMargin on top and bottom (y-axis)
.ds-u-margin-y--00px.ds-u-margin-y--054px.ds-u-margin-y--18px.ds-u-margin-y--216px.ds-u-margin-y--324px.ds-u-margin-y--432px.ds-u-margin-y--540px.ds-u-margin-y--648px.ds-u-margin-y--756pxMargin top
.ds-u-margin-top--00px.ds-u-margin-top--054px.ds-u-margin-top--18px.ds-u-margin-top--216px.ds-u-margin-top--324px.ds-u-margin-top--432px.ds-u-margin-top--540px.ds-u-margin-top--648px.ds-u-margin-top--756pxMargin right
.ds-u-margin-right--00px.ds-u-margin-right--054px.ds-u-margin-right--18px.ds-u-margin-right--216px.ds-u-margin-right--324px.ds-u-margin-right--432px.ds-u-margin-right--540px.ds-u-margin-right--648px.ds-u-margin-right--756pxMargin bottom
.ds-u-margin-bottom--00px.ds-u-margin-bottom--054px.ds-u-margin-bottom--18px.ds-u-margin-bottom--216px.ds-u-margin-bottom--324px.ds-u-margin-bottom--432px.ds-u-margin-bottom--540px.ds-u-margin-bottom--648px.ds-u-margin-bottom--756pxMargin left
.ds-u-margin-left--00px.ds-u-margin-left--054px.ds-u-margin-left--18px.ds-u-margin-left--216px.ds-u-margin-left--324px.ds-u-margin-left--432px.ds-u-margin-left--540px.ds-u-margin-left--648px.ds-u-margin-left--756pxAuto margins
Responsive margins
Responsive format: .ds-u-[breakpoint]-margin-[x|y|bottom|left|right|top]--[0-7]
Scale: 0.22
Read more about how the design system approaches spacing here.