CSS letter-spacing 文字の間隔を指定する

目次 letter-spacingとは
  文字の間隔が標準
  文字の間隔が5px
  文字の間隔が20px

letter-spacingとは

letter-spacingは、文字の間隔を指定します。

書き方 letter-spacing : 値
数値 + 単位
文字の間隔に数値+単位のスペースを追加します。
normal 通常の間隔にします。(初期値)
継承 継承する
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/letter-spacing

文字の間隔が標準

<style>
  .p1 {
    letter-spacing: normal; /* 標準の間隔 */
    border: 1px solid #000;
    width: 400px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">文字の間隔normalです</p>

 

文字の間隔が5px

<style>
  .p1 {
    letter-spacing: 5px; /* 5pxを指定 */
    border: 1px solid #000;
    width: 400px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">文字の間隔5pxです</p>

 

文字の間隔が20px

<style>
  .p1 {
    letter-spacing: 20px; /* 20pxを指定 */
    border: 1px solid #000;
    width: 400px;
    height: 30px;
    background: LightCyan;
  }
</style>
<p class="p1">文字の間隔20pxです</p>

関連の記事

CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示領域を超えた時の改行
CSS overflow はみ出し部分を表示する/しない

△上に戻る