Spacing System

Spacing can be applied to margin or padding properties, as well as to both vertical and horizontal edges. Use as a pre defined container.

Below all the space options with its styling  and naming conventions (see also the complete Tokens list).

• .spacing-zeta

  Adds 0rem default margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  Adds 0rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  Adds 0rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--center

  Adds auto left and right margins (needs width)

  content
• .spacing-zeta

  spacing-zeta--inline

  Adds 0rem left and right paddings

  content
• .spacing-zeta

  spacing-zeta--inline-start

  Adds 0rem left paddings

  content
• .spacing-zeta

  spacing-zeta--inline-end

  Adds 0rem right paddings

  content
• .spacing-zeta

  spasing-zeta--stack

  Adds 0rem bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--x1

  Adds 0.25rem margins and/or paddings

  content
• .spacing-zeta

  spacing-zeta--square

  spacing-zeta--x1

  Adds 0.25rem paddings

  content
• .spacing-zeta

  spacing-zeta--squish

  spacing-zeta--x1

  Adds 0.25rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x1

  Adds 0.25rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x1

  Adds 0.25rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x1

  Adds 0.25rem right paddings

  content
• .spacing-zeta

  spacing-zeta--stack

  spacing-zeta--x1

  Adds 0.25rem bottom paddings

  content
• .spacing-zeta

  spacing-zeta--xxs

  Adds 0.25rem margins and/or paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--xxs

  Adds 0.25rem paddings

  content
• spacing-zeta

  spacing-zeta--squish

  spacing-zeta--xxs

  Adds 0.25rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--xxs

  Adds 0.25rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--xxs

  Adds 0.25rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--xxs

  Adds 0.25rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--xxs

  Adds 0.25rem bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--x2

  Adds 0.5rem margins and/or paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x2

  Adds 0.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x2

  Adds 0.5rem top and bottom paddings

  content
• spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x2

  Adds 0.5rem left and right paddings

  content
• spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x2

  Adds 0.5rem left paddings

  content
• spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x2

  Adds 0.5rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x2

  Adds 0.5rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--xxs

  Adds 0.5rem margins and/or paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zebra--xs

  Adds 0.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--xs

  Adds 0.5rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--xs

  Adds 0.5rem left or right padding

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--xs

  Adds 0.5rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--xs

  Adds 0.5rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--xs

  Adds 0.5rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x3

  Adds 0.75rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x3

  Adds 0.75rem padding

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x3

  Adds 0.75rem top and bottom padding

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x3

  Adds 0.75rem left or/and right padding

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x3

  Adds 0.75rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x3

  Adds 0.75rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x3

  Adds 0.75rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--s

  Adds 0.75rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--s

  Adds 0.75rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--s

  Adds 0.75rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--s

  Adds 0.75rem left and or right padding

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--s

  Adds 0.75rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--s

  Adds 0.75rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--s

  Adds 0.75rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x4

  Adds 1rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x4

  Adds 1rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x4

  Adds 1rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x4

  Adds 1rem left and or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x4

  Adds 1rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x4

  Adds 1rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x4

  Adds 1rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--b

  Adds 1rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--b

  Adds 1rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--b

  Adds 1rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--b

  Adds 1rem left and or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--b

  Adds 1rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--b

  Adds 1rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  spacing-zeta--b

  Adds 1rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x5

  Adds 1.25rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x5

  Adds 1.25rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x5

  Adds 1.25rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x5

  Adds 1.25rem left and or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x5

  Adds 1.25rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x5

  Adds 1.25rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x5

  Adds 1.25rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x6

  Adds 1.5rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x6

  Adds 1.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x6

  Adds 1.5rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x6

  Adds 1.5rem left and or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x6

  Adds 1.5rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x6

  Adds 1.5rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x6

  Adds 1.5rem bottom margin

  content
• .spacing-zeta

  spacing-zeta--m

  Adds 1.5rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--m

  Adds 1.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--m

  Adds 1.5rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--m

  Adds 1.5rem left and or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--m

  Adds 1.5rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--m

  Adds 1.5rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  spacing-zeta--m

  Adds 1.5rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x7

  Adds 1.75rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x7

  Adds 1.75rem paddings

  content
• .spacing-zeta

  $spacing.zeta.squish.x7

  .spacing-zeta--x7

  Adds 1.75rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x7

  Adds 1.75rem left and/or right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x7

  Adds 1.75rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x7

  Adds 1.75rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x7

  Adds 1.75rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x8

  Adds 2rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x8

  Adds 2rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x8

  Adds 2rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x8

  Adds 2rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x8

  Adds 2rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-left

  .spacing-zeta--x8

  Adds 2rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x8

  Adds 2rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--l

  Adds 2rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--l

  Adds 2rem padding

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--l

  Adds 2rem top and bottom padding

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--l

  Adds 2rem left and right padding

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--l

  Adds 2rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--l

  Adds 2rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--l

  Adds 2rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x9

  Adds 2.25rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x9

  Adds 2.25rem paddings

  content
• .spacing-zeta

  .spacing-zeta-squish

  .spacing-zeta--x9

  Adds 2.25rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x9

  Adds 2.25rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x9

  Adds 2.25rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x9

  Adds 2.25rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x9

  Adds 2.25rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x10

  Adds 2.5rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x10

  Adds 2.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x10

  Adds 2.5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x10

  Adds 2.5rem left and right padding

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x10

  Adds 2.5rem left padding

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x10

  Adds 2.5rem right padding

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x10

  Adds 2.5rem margin

  content
• .spacing-zeta

  .spacing-zeta--x11

  Adds 2.75rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x11

  Adds 2.75rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x11

  Adds 2.75rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x11

  Adds 2.75rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x11

  Adds 2.75rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x11

  Adds 2.75rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x11

  Adds 2.75rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x12

  Adds 3rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x12

  Adds 3rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x12

  Adds 3rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x12

  Adds 3rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x12

  Adds 3rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x12

  Adds 3rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x12

  Adds 3rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x12

  Adds 3rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x16

  Adds 4rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x16

  Adds 4rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x16

  Adds 4rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x16

  Adds 4rem left and righ paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x16

  Adds 4rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x16

  Adds 4rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x16

  Adds 4rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--xl

  Adds 4rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--xl

  Adds 4rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--xl

  Adds 4rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--xl

  Adds 4rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--xl

  Adds 4rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--xl

  Adds 4rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--xl

  Adds 4rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x20

  Adds 5rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x20

  Adds 5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x20

  Adds 5rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x20

  Adds 5rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x20

  Adds 5rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-left

  .spacing-zeta--x20

  Adds 5rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x20

  Adds 5rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--xxl

  Adds 5rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--xxl

  Adds 5rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--xxl

  Adds 5rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--xxl

  Adds 5rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--xxl

  Adds 5rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--xxl

  Adds 5rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--xxl

  Adds 5rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--x24

  Adds 6rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--x24

  Adds 6rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--x24

  Adds 6rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--x24

  Adds 6rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--x24

  Adds 6rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--x24

  Adds 6rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--x24

  Adds 6rem bottom margin

  content
• .spacing-zeta

  .spacing-zeta--xxxl

  Adds 6rem either or both margins and paddings

  content
• .spacing-zeta

  .spacing-zeta--square

  .spacing-zeta--xxxl

  Adds 6rem paddings

  content
• .spacing-zeta

  .spacing-zeta--squish

  .spacing-zeta--xxxl

  Adds 6rem top and bottom paddings

  content
• .spacing-zeta

  .spacing-zeta--inline

  .spacing-zeta--xxxl

  Adds 6rem left and right paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-start

  .spacing-zeta--xxxl

  Adds 6rem left paddings

  content
• .spacing-zeta

  .spacing-zeta--inline-end

  .spacing-zeta--xxxl

  Adds 6rem right paddings

  content
• .spacing-zeta

  .spacing-zeta--stack

  .spacing-zeta--xxxl

  Adds 6rem bottom margin

  content