CSS - letter-spacing 屬性

CSS 的letter-spacing屬性指定構成單詞或文字的字母或字元之間的間距。如果給出正值，則字母或字元之間的間距增加；如果給出負值，則字母或字元之間的間距減小。

語法

letter-spacing: normal | length | initial | inherit;

屬性值

值	描述
normal	表示字母之間的正常間距。預設值。
length	以長度單位（px、em、rem 等）指定字母之間的間距。允許使用負值。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Letter Spacing 屬性示例

以下示例使用不同的值解釋了line-spacing屬性。

使用 Normal 值的 Letter Spacing 屬性

要使單詞或文字中的字母或字元之間具有正常間距，我們使用normal值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px {
         letter-spacing: 5px;
      }

      .normal {
         letter-spacing: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 5px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: normal
   </h4>
   <h3 class="normal">
      Observe the spacing in this line of text.
   </h3>


</body>

</html>

使用正值的 Letter Spacing 屬性

要使單詞或文字中的字母或字元之間有更大的間距，我們使用長度單位（例如 px、cm、rem 等）指定正值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3{
         color: red;
      }
      .px{
            letter-spacing: 7px;
      }
      .cm{
            letter-spacing: 1cm;
      }
      .rem{
            letter-spacing: 1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 7px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1cm
   </h4>
   <h3 class="cm">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>
    
</body>

</html>

使用負值的 Letter Spacing 屬性

要使單詞或文字中的字母或字元之間有更小的間距，我們使用長度單位（例如 px、cm、rem 等）指定負值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px1 {
         letter-spacing: -1px;
      }

      .px2 {
         letter-spacing: -2px;
      }

      .rem {
         letter-spacing: -1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: -1px
   </h4>
   <h3 class="px1">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -2px
   </h4>
   <h3 class="px2">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>

</body>

</html>

支援的瀏覽器

屬性
letter-spacing	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面