css如何設定行間距？ css文字文字的行間距設定（程式碼實例）
- 青灯夜游原創
- 2018-10-10 10:22:5424513瀏覽
css如何設定行距？其實在css並沒有一個直接設定行間距的方式，只能透過間接的設定行高來實現行間距效果，行高越大就表示行間距越大。本章就跟大家介紹css中是怎樣透過設定行高來屬性行間距效果的，讓大家可以了解css文字文字的行間距是如何調整的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們先了解什麼是行高，在css中又是如何設定行高，進而設定和調整行間距。
簡單來說：行高類似單線本，單線本裡是用一行一行線條隔開的空間，線與線之間的距離就是行高。網頁中的文字文字實際上是寫在一條看不見的線中的，然後會預設在行高中垂直居中顯示。那麼在css中是如何設定行高的呢？在css中可以透過 line-height 屬性來設定行高，下面我們來簡單介紹一下css line-height 屬性吧。
css line-height 屬性 會影響行框的佈局，是用來設定行與行之間的距離（行高）的，不允許使用負值。在應用到一個區塊級元素的時候，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為「行間距」）分成兩半，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。
下面我們來看看css line-height屬性 可能會使用的值：
normal：設定合理的行間距， 預設值。
number：設定數字，此數字會與目前的字體尺寸相乘來設定行間距。
length：設定固定的行間距。
%：基於目前字體尺寸的百分比行間距。
inherit：規定應該從父元素繼承 line-height 屬性的值。
附註：所有瀏覽器都支援 line-height 屬性。
我們來用實例介紹line-height屬性是如何設定和調整行間距，下面會舉例介紹設定行間距的方法：
#1、使用數值來設定行間距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用数值来设置行间距</title>
<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>效果圖：
#2、使用像素值設定行間距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用数值来设置行间距</title>
<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>效果圖：
3、使用百分比設定行間距
line-height屬性指定了一個百分數，則會相對於字體去計算行高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用数值来设置行间距</title>
<style type="text/css">
p.small {
line-height: 80%;
}
p.big {
line-height: 200%;
}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
</p>
</body>
</html>效果圖：
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS影片教學！
相關推薦：php公益培訓影片教學
#以上是css如何設定行間距？ css文字文字的行間距設定（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！