Primer CSS Интервал на основе Em

Опубликовано: 16 Февраля, 2023

Primer CSS Spacing содержит интервал на основе Em, который в основном используется для обеспечения интервала между компонентами, имеющими значения в em, для которых значение в сочетании с типографикой, высотой строки или общей высотой становится разумными числами.

Размер основного шрифта GitHub составляет 14 пикселей, с которым сложно работать, поэтому иногда мы не можем получить целое число. Перечисленные ниже переменные предпочтительны для использования в компонентах и пользовательском CSS.

Переменные	Дробная часть	Y Заполнение (em)	Общая высота 14 пикселей	Общая высота 16 пикселей
$em-спейсер-1	1/16	0,0625	22,75	26
$em-спейсер-2	1/8	0,125	24,5	28
$em-спейсер-3	1/4	0,25	28	32
$em-спейсер-4	3/8	0,375	31,5	36
$em-спейсер-5	1/2	.5	35	40
$em-спейсер-6	3/4	0,75	42	48

Синтаксис:

$name-of-the-variable: value;

Примеры ниже иллюстрируют интервалы Primer CSS на основе Em.

Пример 1. В этом примере мы отобразим две кнопки, создав собственную переменную $em-spacer-12, которая будет содержать значение 1em.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
  
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
        <h2>Primer CSS Em-based Spacing</h2>
        <br>
        <div class="gap mx-4">
            <button class="color-bg-success">
                <p>Button 1</p>
            </button>
            <button class="color-bg-success">
                <p>Button 2</p>
            </button>
        </div>
    </div>
</body>
  
</html>

СКСС:

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

CSS:

.gap{
    gap: 1em;
      }

Выход:

Пример 2: В этом примере мы будем использовать интервал внутри элемента кнопки в качестве заполнения.

СКСС:

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

CSS:

.left{
    padding: 1em;
      }

Выход:

Ссылки: https://primer.style/css/support/spacing

Technical Scripter Picked CSS

Primer CSS Интервал на основе Em

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ