Spacing

Throughout GDS, the term spacing is used to describe the gap between elements. It is usually a visual gap between elements and often not equal to applied CSS margin.

George spacing scale

George uses the following major spacing values:

• 5px
• 10px
• 20px
• 25px
• 30px
• 40px

HINT We are in the process of moving away from aforementioned values and migrate to an 8px-based system instead. During the transition period, not all values are multiples of 5px anymore, as you’ll notice below.

Spacing vs. margin/padding

When text is involved, spacing is measured from the baseline of the preceding element to the capital letter height of the succeeding element. In the following example, visual spacing of 40px is achieved by adding only 28px of CSS margin. 6px are part of the line-height of the Paragraph, and another 6px are part of the line-height of a level 2 Heading:

The George style automatically takes line-height offsets into account and reduces margins to match the visual spacing. While this can not be 100% exact due to different text-renderers in various browsers, this is usually accurate to about ±1px.

Group

Open in Storybook

If components other than Heading, Paragraph, List, Card or CardGroup are inserted into a page, they need a Group wrapper to adapt proper spacing to surrounding components.

Some components are exempt from this rule, e.g. ButtonGroup, because they themselves use Group’s .g-group under the hood.