01:親要素: letter-spacing:1em

親要素のfont-sizeで計算された文字間が子要素に設定される

        .parent01{
           letter-spacing: 1em;
        }

タイトルタイトルタイトル

本文テキスト本文テキスト本文テキスト


02: * にletter-spacing: 1em;だと

        .parent02 *{
            letter-spacing:1em;
        }

タイトルタイトルタイトル

本文テキスト本文テキスト本文テキスト

コンポーネントごとのまとまりで個別に制御しづらい

        .change{
            letter-spacing: 0.1em!important;
        }

タイトルタイトルタイトル

本文テキスト本文テキスト本文テキスト


03: CSS変数を設定し * にletter-spacing: var(--spacing);

        :root{
            --spacing: 1em;
        }
        .parent03 *{
            letter-spacing: var(--spacing);
        }

タイトルタイトルタイトル

本文テキスト本文テキスト本文テキスト

実数値と違って、微調整する際に継承してコントロールしやすい

        .change2{
            --spacing: 0.5em;
        }

タイトルタイトルタイトル

本文テキスト本文テキスト本文テキスト