letter-spacing と word-spacing の違い:
l タイトルの 2 つの属性は頻繁には使用されませんが、どちらも外観と機能の両方に類似点があります。しかし大きな違いもありますので、例を挙げて簡単に紹介しましょう。
例 1:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{ letter-spacing:40px;}.second{ word-spacing:40px;}</style></head><body> <div class="first">I am a good boy</div> <div class="second">I am a good boy</div></body></html>上記のコードのパフォーマンスからわかるように、letter-spacing は文字または文字間の間隔を変更し、word-spacing は単語 (単語) 間の間隔を変更します。上記のコードでは、letter-spacing により文字間の間隔が 40px に設定されます。たとえば、「I」と「am」の間のスペース、および両方の文字間のスペースも文字とみなされます。辺も 40px に設定されるため、「I」と「a」の間のスペースは 80px になります。 word-spacing は単語間の間隔を 40px に設定します。
特記事項:
Letter-spacing と word-spacing は、文字と単語の間の間隔を正確に設定するのではなく、最後の文字と単語を除き、指定した文字と単語の後に指定した間隔を追加します。
例 2:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{ letter-spacing:40px;}.second { word-spacing:40px;}.third{ word-spacing:40px; }</style></head><body> <div class="first">蚂蚁部落</div> <div class="second">蚂蚁部落</div> <div class="third">蚂 蚁部落</div></body></html>上記のコードの実行から、漢字の場合、それらがつながっている場合、それらは 1 つの「単語」とみなされます。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/517.html
最も元のアドレスは次のとおりです: http://www.softwhy.com/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
