CSS教程(7)：網頁段落行間距控制的實例

2024-07-11 09:04:47

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：本文主要講解如何用CSS控制網頁段落行間距的三個實例：1、使用百分比設置行間距，2、使用像素值設置行間距，3、使用數值來設置行間距。

本文主要講解如何用CSS控制網頁段落行間距的三個實例：1、使用百分比設置行間距，2、使用像素值設置行間距，3、使用數值來設置行間距。

1、使用百分比設置行間距

本例演示如何使用百分比值來設置段落中的行間距。

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
這是擁有標準行高的段落。
在大多數瀏覽器中默認行高大約是 110% 到 120%。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
</p>
<p class="small">
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
</p>
<p class="big">
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
</p>
</body>
</html>

2、使用像素值設置行間距

本例演示如何使用像素值來設置段落中的行間距。看到本信息說明你在認真閱讀教程，這句話和教程無任何關聯，網頁教學Aspku.com只是為了防止采集。

<html>
<head>
<style type="text/css">
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}
</style>
</head>
<body>
<p>
這是擁有標準行高的段落。
在大多數瀏覽器中默認行高大約是 20px。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
</p>
<p class="small">
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
</p>
<p class="big">
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
</p>
</body>
</html>

3、使用數值來設置行間距

本例演示如何使用一個數值來設置段落中的行間距。

<html>
<head>
<style type="text/css">
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>
<p>
這是擁有標準行高的段落。
默認行高大約是 1。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
這是擁有標準行高的段落。
</p>
<p class="small">
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
這個段落擁有更小的行高。
</p>
<p class="big">
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
這個段落擁有更大的行高。
</p>
</body>
</html>