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 HTML margin.
George spacing scale
George uses the following major spacing values:
- 5px
- 10px
- 20px
- 25px
- 30px
- 40px
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 HTML margin. 6px are part of the line-height of the <p>, and another 6px are part of the line-height of the <h2>:
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.
Spacer boxes
If elements other than <h1>, <h2>, <h3>, <p>, <ul>, <ol> or <li> are inserted into a page, they need a container with a .g-group class to adapt proper spacing to other text elements: