如何美化網頁文字(09)-[line-height]改變文字的行距 @ 雲橙雨林

0000標題020

我們有時候打文章時，每個文章的行距有時設置的過於緊，會造成閱讀者看得很不舒服，所以，我們會想把行距拉大一點，讓閱讀者能看得舒服一點，這時候就要利用line-height 的屬性，來讓句子行距增加或減少。

先來寫個html吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙</title>
</head>
<body>
<h1>line-height</h1>
<p id="line1">The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line2">The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line3"> The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
<p id="line4"> The results of a survey <strong>keyword</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons.魚 橙</p>
</body>
</html>

看看還沒改變前的樣子吧！

2012-10-09_163145

將css 也加進來吧！

<style type="text/css">
#line1 {
    line-height: 0.5em;
    background-color: #CF0;
}
#line2 {
    line-height: 1em;
    background-color: #CCC;
}
#line3 {
    line-height: 2em;
    background-color: #FFC;
}
#line4 {
    line-height: 3em;
    background-color: #9FC;
}
</style>