CSS の単語間隔と文字間隔の違いを深く理解する (コード付き)-CSSチュートリアル-php.cn

CSS の単語間隔と文字間隔の違いを深く理解する (コード付き)

yulia

リリース： 2018-09-08 10:45:31

オリジナル

5858 人が閲覧しました

CSS は、「単語」を、ある種の空白文字で囲まれた空白以外の文字の文字列として定義します。 Letter-spacing 属性と word-spacing 属性は両方とも、対応する要素に空白を追加するために使用されます。この 2 つはよく混同されることがあります。次に、CSS での間隔の設定について説明します。

1. word-spacing 単語間のスペース (つまり、単語の間隔) を増減します。

1. オブジェクト内の単語の間に挿入されるスペースの数を取得または設定します。負の値も許可されます。
2. デフォルト値は、0 に設定するのと同じです。
3. 負の値が許可され、文字がよりコンパクトになります。 4. この属性を使用すると、幅が広すぎるドキュメントを作成できます。したがって、Word-spacing の使用には注意が必要です

letter-spacing オブジェクト内のテキスト間のスペースを増減します。中国語のテキストと英語の文字は、設定された距離で区切られます。このプロパティは単語の間隔を制御します。この属性値は中国語と英語の両方に適用されます。 2. デフォルト値は、0 に設定することと同じです。

3. 文字間隔の使用はテキストに対してのみ機能し、画像には影響しません。中国語の文字でのletter-spacingの使用は、1文字の間隔に基づいて行われます

例: 同じ文に対して、letter-spacing属性とword-spacing属性をそれぞれ与えて、それらの違いを確認します。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{letter-spacing: 15px;}
   .a2{word-spacing: 15px;}
  </style>
 </head>
 <body>
  <p class="a1">have a nice day 今天心情怎么样呢？</p>
  <p class="a2">have a nice day 今天心情怎么样呢？</p>
 </body>
</html>

ログイン後にコピー

レンダリング:

概要: CSS の word-spacing は単語間のスペース (単語間隔) を増減し、letter-spacing は文字間のスペース (文字間隔) を増減します。デフォルトでは、文字間隔はほとんど使用されず、ブラウザのデフォルトのスタイルを使用できます。

CSS の単語間隔と文字間隔の違いを深く理解する (コード付き)