我們有時候打文章時，每個文章的行距有時設置的過於緊，會造成閱讀者看得很不舒服，所以，我們會想把行距拉大一點，讓閱讀者能看得舒服一點，這時候就要利用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>
看看還沒改變前的樣子吧！
將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>
將#line1~4 依序line-height設置 0.5em、1em、2em、3em ，為了方便辨識，在每個都加了底色！來看看輸出結果吧！
可以看到#line1的部份，設置0.5em會看到行距設了過小，他的字體都重壘在一起了，而依序下來，就會隨著數字變大，行距就會更大了。
一般而言，建議設置行距以%（百分比）或em (行長單位)為優，也可設定(px.pt)像素單位，如果當你的文字改變時，像素單位並無法隨之變動，而百分比或行長單位的方式，會隨你設定的文字大小，隨之變動，而就會減少文字重壘的狀況，特別在修改主體css時，更是要注意！
沒有留言:
張貼留言