網頁制作poluoluo文章簡介：本文主要講解如何用CSS控制網頁段落行間距的三個實例：1、使用百分比設置行間距，2、使用像素值設置行間距，3、使用數值來設置行間距。
本文主要講解如何用CSS控制網頁段落行間距的三個實例：1、使用百分比設置行間距，2、使用像素值設置行間距，3、使用數值來設置行間距。
本例演示如何使用百分比值來設置段落中的行間距。
<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>
本例演示如何使用像素值來設置段落中的行間距。看到本信息說明你在認真閱讀教程，這句話和教程無任何關聯，網頁教學poluoluo.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>
本例演示如何使用一個數值來設置段落中的行間距。
<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>