Primer CSS Em-based Spacing

Primer CSS Spacing contains Em-based Spacing which is mainly used to provide the spacing between the components, having the values in em, for which the value combined with typography, line height, or the total height becomes sensible numbers.

GitHub’s body font size is 14px which is difficult to work with, so we sometimes can’t achieve a whole number. Variables listed below are preferred for use within components and custom CSS.

Syntax:

$name-of-the-variable: value;

Below examples illustrate the Primer CSS Em-based Spacing

Example 1: In this example, we will render two buttons, by creating our own variable $em-spacer-12 that will hold the value of 1em.

SCSS:

$em-spacer-12: 1em;
.gap {
      gap:$em-spacer-12;
}

CSS:

.gap{
    gap: 1em;
      }

Output:

 

Example 2: In this example, we will use spacing inside of the button element as padding.

SCSS:

$em-spacer-12: 1em;
.left {
      padding:$em-spacer-12;
}

CSS:

.left{
    padding: 1em;
      }

Output:

 

References: https://primer.style/css/support/spacing