Spacing

Guidelines

Spacing relates to both padding and margin of elements.

We've defined 10 levels of spacing that can be used in Honeycomb. These levels are:

  • 4 px
  • 10 px
  • 20 px
  • 24 px
  • 32 px
  • 40 px
  • 48 px
  • 60 px
  • 70 px
  • 80 px

Use these spacing values to group together and separate items.

Code

Coding space in HTML

Regular = 40px, Tight = 20px, Loose = 80px

...
...
...
...
...
...
...
...

Coding space in Sass

1 measure of the ratio unit = 40px

@include margin(1); // 40px margin all round
@include margin(0.5, 'left'); // 20px left margin
@include padding(0.25, 'top'); // 10px top padding