ホームページ > 記事 > ウェブフロントエンド > CSSの行間を設定する方法

CSSの行間を設定する方法

不言オリジナル: 2018-10-31 10:15:5121240ブラウズ

CSS の行間隔を設定する方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、最後に行の高さ「line-height」で行間隔を設定します。

CSSの行間を設定する方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

Web ページのレイアウトでは、複数の大きなテキストが密集していると常に見苦しくなります。このとき、テキストの混雑を緩和し、行間を設定する必要があります。ページ全体が美しく整然と見えるようにするには、どうすればよいでしょうか?この記事ではCSSの行間を設定する方法を紹介します。

まず、CSS には行間隔を直接設定できる属性がないことを知っておいてください。そのため、行間隔を設定するには line-height を使用する必要があります。line-height の値が大きいほど、行間隔が大きくなります。、行間隔が大きいほど間隔が広くなります。

Line-height の値は、相対値または絶対値のいずれかに設定されます。静的ページでは、テキストサイズが固定されている場合は絶対値がよく使用されます。フォーラムやブログなどのユーザーカスタマイズ可能なフォントサイズを持つページは通常、相対値に設定されているため、対応する行間隔はユーザー定義のフォントサイズに応じて変更できます。

line-height を使用して CSS で行間隔を設定するコード例を見てみましょう:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                font-size: 20px;
                line-height: 2em;
            }
        </style>
        
    </head>
    <body>
        <span>
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
        </span> 
    </body>
</html>

CSS で行間隔を設定する効果は次のとおりです:

CSSの行間を設定する方法

この記事はここで終わります。さらに興味深い内容については、PHP 中国語 Web サイトの関連チュートリアルのコラムを参照してください。！！

以上がCSSの行間を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：表示可能とは何ですか?表示の適用方法:テーブルセル次の記事：表示可能とは何ですか?表示の適用方法:テーブルセル

続きを見る