CSS设置文本——行间距

柔光的暖阳◎ 2021-11-11 11:52 459阅读 0赞

<1>.用比例设置行间距

1 <html>
     2 <head>
     3     <style type="text/css">
     4         p.small {
         line-height: 90%}
     5         p.big {
         line-height: 200%}
     6     </style>
     7 </head>
     8 
     9 <body>
    10     <p>
    11         这是拥有标准行高的段落。
    12         在大多数浏览器中默认行高大约是 110% 到 120%。
    13         这是拥有标准行高的段落。
    14         这是拥有标准行高的段落。
    15         这是拥有标准行高的段落。
    16         这是拥有标准行高的段落。
    17         这是拥有标准行高的段落。
    18     </p>
    19     <p class="small">
    20         这个段落拥有更小的行高。
    21         这个段落拥有更小的行高。
    22         这个段落拥有更小的行高。
    23         这个段落拥有更小的行高。
    24         这个段落拥有更小的行高。
    25         这个段落拥有更小的行高。
    26         这个段落拥有更小的行高。
    27     </p>
    28     <p class="big">
    29         这个段落拥有更大的行高。
    30         这个段落拥有更大的行高。
    31         这个段落拥有更大的行高。
    32         这个段落拥有更大的行高。
    33         这个段落拥有更大的行高。
    34         这个段落拥有更大的行高。
    35         这个段落拥有更大的行高。
    36     </p>
    37 </body>
    38 </html>

只想说明一点，在大多数的浏览器中，标准的行

间距是110%～120%。这个要做到心里有数。

<2>用像素来设置行间距

1 <html>
     2 <head>
     3     <style type="text/css">
     4         p.small {line-height: 10px}
     5         p.big{line-height: 30px}
     6     </style>
     7 </head>
     8 
     9 <body>
    10     <p>
    11         这是拥有标准行高的段落。
    12         在大多数浏览器中默认行高大约是 110% 到 120%。
    13         这是拥有标准行高的段落。
    14         这是拥有标准行高的段落。
    15         这是拥有标准行高的段落。
    16         这是拥有标准行高的段落。
    17         这是拥有标准行高的段落。
    18     </p>
    19     <p class="small">
    20         这个段落拥有更小的行高。
    21         这个段落拥有更小的行高。
    22         这个段落拥有更小的行高。
    23         这个段落拥有更小的行高。
    24         这个段落拥有更小的行高。
    25         这个段落拥有更小的行高。
    26         这个段落拥有更小的行高。
    27     </p>
    28     <p class="big">
    29         这个段落拥有更大的行高。
    30         这个段落拥有更大的行高。
    31         这个段落拥有更大的行高。
    32         这个段落拥有更大的行高。
    33         这个段落拥有更大的行高。
    34         这个段落拥有更大的行高。
    35         这个段落拥有更大的行高。
    36     </p>
    37 </body>
    38 </html>

同样的，这里要记住也仅仅是20px而已。

<3>.用数值来设置行间距

由于代码几乎相同，所以这里就不再贴出代码了。

但是要说明一下。

同样的我们要记住，大多数的浏览器的标准行间距是1.

下面贴出核心代码

p.small \{line-height: 0.5\}

p.big\{line-height: 2\}

</style>

转载于:https://www.cnblogs.com/o8le/archive/2011/09/17/2179728.html