ホームページ > 記事 > ウェブフロントエンド > 文字間隔と単語間隔の違い_html/css_WEB-ITnose
文字間隔と単語間隔の違い_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:091864ブラウズ
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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。