溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css怎么設置間距”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css怎么設置間距”吧！
設置方法：1、使用letter-spacing屬性設置字間距，語法“letter-spacing:像素大小”；2、使用line-height屬性設置行間距，語法“line-height:像素大小”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、css設置字間距：
使用letter-spacing屬性設置字間距。
letter-spacing 屬性增加或減少字符間的空白（字符間距）。
該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長度值時，會調整字母之間通常的間隔。因此，normal 就相當于值為 0。
注釋：允許使用負值，這會讓字母之間擠得更緊。
屬性值：
normal 默認。規定字符間沒有額外的空間。
length 定義字符間的固定空間（允許使用負值）。
inherit 規定應該從父元素繼承 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設置行間距
我們可以使用line-height屬性設置行間的距離（行高）。
注：不允許使用負值。
說明
該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。
屬性值：
normal默認。設置合理的行間距。
number設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
length設置固定的行間距。%基于當前字體尺寸的百分比行間距。
inherit規定應該從父元素繼承
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怎么設置間距”的內容了，經過本文的學習后，相信大家對css怎么設置間距這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
