HTMLページへの文字や単語の間隔テキストを設定する方法

文字や単語の間隔の設定はじめに

プロパティ名 ユニット 説明
文字間隔 PX セット文字間隔
単語間隔 PX セット単語の間隔

セット文字間隔の文字間隔

  • letter-spacingプロパティの原理は、設定したいテキストに基づいて、各文字間の間隔。
  • 私たちは入力してみましょうletter-spacing:のようなプロパティの練習、練習の内容をHTMLページp毎文字間隔セットのラベルテキスト50px
  • ブロック

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字符和单词距离</title>
    <style>
        p{
            letter-spacing: 50px;
        }
    </style>
</head>
<body>
    <p>成功不是打败别人,而是改变自己。</p>
</body>
</html>
  • 結果の図


単語の間隔単語の間隔提供

  • word-spacingプロパティの原理は次のとおりです。あなたが設定したいテキストによると、主に英語のウェブサイトで使用されるコア領域のピッチを設定するために、私は中国がの理解より良い読者与えることである使用word-spacing原則の性質を。
  • 私たちは入力してみようletter-spacingHTMLページ:のようなプロパティの練習、練習の内容をpスペースの各セット間の間隔にタグ30px

  • ブロック

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字符和单词距离</title>
    <style>
        p{
            word-spacing: 30px;
        }
    </style>
</head>
<body>
    <p>成功 不是 打败 别人,而是改变自己。</p>
</body>
</html>
  • 結果の図

おすすめ

転載: www.cnblogs.com/lq0001/p/11879102.html