溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css怎么設(shè)置間距”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css怎么設(shè)置間距”吧！
設(shè)置方法：1、使用letter-spacing屬性設(shè)置字間距，語法“l(fā)etter-spacing:像素大小”；2、使用line-height屬性設(shè)置行間距，語法“l(fā)ine-height:像素大小”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、css設(shè)置字間距：
使用letter-spacing屬性設(shè)置字間距。
letter-spacing 屬性增加或減少字符間的空白（字符間距）。
該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長度值時，會調(diào)整字母之間通常的間隔。因此，normal 就相當(dāng)于值為 0。
注釋：允許使用負(fù)值，這會讓字母之間擠得更緊。
屬性值：
normal 默認(rèn)。規(guī)定字符間沒有額外的空間。
length 定義字符間的固定空間（允許使用負(fù)值）。
inherit 規(guī)定應(yīng)該從父元素繼承 letter-spacing 屬性的值。
示例：
<html>
<head>
<style type="text/css">
p.p1 {letter-spacing: -0.5em}
p.p2{letter-spacing: 20px}
</style>
</head>
<body>
<p class="p1">我的公主殿下</p>
<p class="p2">臣來遲了</p>
</body>
</html>效果：
2、css設(shè)置行間距
我們可以使用line-height屬性設(shè)置行間的距離（行高）。
注：不允許使用負(fù)值。
說明
該屬性會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。
原始數(shù)字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。
屬性值：
normal默認(rèn)。設(shè)置合理的行間距。
number設(shè)置數(shù)字，此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。
length設(shè)置固定的行間距。%基于當(dāng)前字體尺寸的百分比行間距。
inherit規(guī)定應(yīng)該從父元素繼承
line-height 屬性的值。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span {
font-size: 20px;
line-height: 2em;
}
</style>
</head>
<body>
<span>
桃之夭夭，灼灼其華。之子于歸，宜其室家。<br>
桃之夭夭，有蕡其實。之子于歸，宜其家室。<br>
桃之夭夭，其葉蓁蓁。之子于歸，宜其家人。
</span>
</body>
</html>效果：
感謝各位的閱讀，以上就是“css怎么設(shè)置間距”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css怎么設(shè)置間距這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼