import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import CopyTable from '../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../utils/parseCss';

{/* @ts-ignore */}
import margin from '$lib/scss/spacers/\_margin.scss?raw';

{/* @ts-ignore */}
import padding from '$lib/scss/spacers/\_padding.scss?raw';

<Meta title="Styles/Layout/Spacers" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# Spacer classes

<CopyTable
  title="Margin"
  mdnLink="margin"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(margin)}
  copyable={[true, false]}
/>

<CopyTable
  title="Padding"
  mdnLink="padding"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(padding)}
  copyable={[true, false]}
/>