CSSの行間を設定する方法-CSSチュートリアル-php.cn

CSSの行間を設定する方法

不言

リリース： 2021-04-18 13:33:23

オリジナル

21279 人が閲覧しました

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の行間を設定する方法