文字行高、文字縮排
透過網頁顯示具有大量文字的文章時，通常都會設定文字的「行高」或「縮排」，這篇教學會介紹「什麼是行高」，以及運用 line-height 和 text-indent 這兩個 CSS 樣式屬性，設定文字的行高和縮排。
快速導覽：
認識行高
網頁中的每個文字，除了本身的字型設定的尺寸，也會根據字型定義產生「內容區域 content area」，預設的行高和內容區域的高度相同，大部分情況為字型尺寸的 1.2 倍，如果有設定行高數值，則會以「中心線」向上下擴展至設定的數值，下圖呈現文字尺寸 ( 深藍色 )、內容區域 ( 淺藍色 ) 和行高 ( 藍色虛線 ) 的關係。
如果一行裡面有多種文字字型或文字尺寸，預設會先對齊「基準線」，但因為每個字型的內容區域和中心線都不同，所以會根據每個字型的行高，按照下圖的計算方式，計算出「最大值」作為實際行高。
line-height 行高
line-height 樣式屬性可以設定文字的「行高」，屬性值可以的用 normal 或非負值的數字，行高的樣式必須設在顯示類型為「區塊容器 block」的父元素，運用 line-height 的繼承特性，讓顯示類型為「行內容器 inline」或「行內容器相關 inline-*」的子元素繼承「父元素的行高」。
由於繼承的特性，有時會造成父元素的行高較小，繼承後發生行高太小的狀況。下表列出屬性值說明：
| 屬性值或單位 | 說明 |
|---|---|
| 使用 normal | 預設值，等於 content area 高度。 |
| px | 像素，絕對長度單位。 |
| 無單位 | 元素文字尺寸的幾倍。 |
| % | 元素文字尺寸的多少百分比。 |
| em | 元素文字尺寸的幾倍。 |
| rem | 根元素文字尺寸的幾倍。 |
下方範例使用 h3 元素包覆文字，並透過 line-height 設定不同的行高，由於行高會影響外圍元素的顯示方式，透過背景顏色就能很清楚的觀察行高的變化。
<!-- HTML 程式碼 -->
<h3 class="a">Morning, Oxxo!! (line-height: normal;)</h3>
<h3 class="b">Morning, Oxxo!! (line-height: 1;)</h3>
<h3 class="c">Morning, Oxxo!! (line-height: 1em;)</h3>
<h3 class="d">Morning, Oxxo!! (line-height: 100%;)</h3>
<h3 class="e">Morning, Oxxo!! (line-height: 30px;)</h3>
<h3 class="f">Morning, Oxxo!! (line-height: 0.3;)</h3>
<h3 class="g">Morning, Oxxo!! (line-height: 3;)</h3>
<!-- CSS 程式碼 -->
<style>
h3 {
font-size: 30px;
background: orange;
}
.a {line-height: normal;} /* 等於 content area 高度 */
.b {line-height: 1;} /* 30px x 1 = 30px */
.c {line-height: 1em;} /* 30px x 1 = 30px */
.d {line-height: 100%;} /* 30px x 100% = 30px */
.e {line-height: 30px; } /* 絕對長度單位 = 30px */
.f {line-height: 0.3;} /* 30px x 0.3 = 9px */
.g{line-height: 3;} /* 30px x 3 = 90px */
</style>
如果一行文字裡有多種不同的字型，或有不同尺寸的文字，則會按照上述的計算規則，計算出「最大行高」填滿該行，下方的範例使用三種不同尺寸的字型，並使用文字本身預設的行高，搭配背景色後預設行高等於文字的 content area，最終計算出的最大行高，就會將外圍的 h2 元素撐開。
<!-- HTML 程式碼 -->
<h2><span class="a">Let's go!</span> <span class="b">Oxxo!</span> <span class="c">Never give up!</span></h2>
<!-- CSS 程式碼 -->
<style>
h2{
border: 2px solid #000;
}
.a {
font-family: Impact;
font-size: 60px;
background: pink;
}
.b {
font-family: verdana;
background: orange;
}
.c {
font-family: cursive;
font-size: 50px;
background: cyan;
}
</style>
line-height 行高特性
通常單純使用區塊容器，在子元素是空元素 ( 沒有任何內容 ) 的狀況下，因為沒有任何「字型」出現，所以不存在內容區域，使用 line-height 也就沒有任何作用，一旦子元素出現具備行高特性的內容，例如任何字元、換行符、圖片...等，身為區塊容器的父元素就會根據字型大小，計算出容器應該具有的最大行高，下方列出常見的一些狀況：
| 狀況 | 行高特性 |
|---|---|
| 子元素是空元素 | 套用「父元素」行高，但沒有內容，行高為 0。 |
| 子元素是換行符 | 套用「父元素」行高。 |
| 子元素行高比父元素小 | 套用「父元素」行高 ( 計算後會使用最大行高 )。 |
| 子元素沒有設定行高 | 套用「父元素」行高 |
| 子元素行高比父元素大 | 套用「子元素」行高 ( 計算後會使用最大行高 )。 |
下方的例子使用五個 div，分別呈現上方幾種狀況。
<!-- HTML 程式碼 -->
<div class="a"><span></span></div> <!-- 子元素為空元素 -->
<div class="b">
<span></span>
<br> <!-- 換行符 -->
<span></span>
<br> <!-- 換行符 -->
</div>
<div class="c"> <span>子元素沒有設定行高</span></div>
<div class="d"> <span>子元素行高比父元素小</span></div>
<div class="e"> <span>子元素行高比父元素大</span></div>
<!-- CSS 程式碼 -->
<style>
div {
width: 250px;
border: 1px solid #000;
background: orange;
margin: 10px;
line-height: 20px;
}
.d span{line-height: 5px;}
.e span{line-height: 100px;}
</style>
由於行高的特性也會影響「行內容器相關 inline-*」的元素，造成圖片 img 等元素的底部「出現空白區域」，這是因為圖片對齊時會使用底線對齊文字的 baseline，當行高發生作用時，預設字型的 baseline 會比底線高 ( 要提供 p、g、y 等英文字母向下的空間 )，就會發生底部出現空白區域的狀況，如果要避免這種狀況，可先設定父元素的 line-height 或修改字型大小，當最大行高小於圖片高度，底部就不會留白。
下方的範例呈現不同行高對於圖片底部空白的影響。
<!-- HTML 程式碼 -->
<div>
<span>預設值</span>
<img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="a">
<span>line-height: 5px;</span>
</div>
<div class="a">
<span>line-height: 5px;</span>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="b">
<span>line-height: 150px;</span>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 250px;
border: 1px solid #000;
background: orange;
margin: 10px;
}
img {width: 80px;}
.a {line-height: 5px;} /* 父元素行高小，底部不留白 */
.b {line-height: 150px;} /* 父元素行高小大，底部留白 */
</style>
text-indent 縮排
text-indent 樣式屬性可以設定「第一行文字縮排」，具有繼承特性，如果第一行開頭是 inline-block 顯示屬性的元素 ( 例如圖片 )，這個元素也會跟著縮排，屬性值需為具有長度單位的數字，長度單位說明如下：
| 縮排單位 | 說明 |
|---|---|
| px | 像素。 |
| em | 文字大小的倍數。 |
| rem | 根元素文字大小的倍數。 |
| % | 元素寬度的百分比。 |
下方範例使用不同的數字單位，呈現縮排 40px 的效果。
<!-- HTML 程式碼 -->
<div class="a">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="c">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="d">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<!-- CSS 程式碼 -->
<style>
:root {font-size: 10px;}
div {
border: 2px solid #000;
width: 400px;
margin: 10px;
padding: 10px;
font-size:20px;
line-break: anywhere;
}
.a {text-indent: 40px;} /* 使用絕對長度 = 40px */
.b {text-indent: 2em;} /* 20px x 2 = 40px */
.c {text-indent: 10%;} /* 400px x 0.1 = 40px */
.d {text-indent: 4rem;} /* 10px x 4 = 40px */
</style>
縮排的方向會依據文字顯示的方向，如果是左向右，正值向右，負值向左，設定負值時會產生「凸排」的效果，但也有可能會被元素邊緣「裁切」，使用時常會搭配 margin 或 padding 設定邊界，下方範例展示一些凸排的效果。
<!-- HTML 程式碼 -->
<div class="a">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="c">STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
<img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<!-- CSS 程式碼 -->
<style>
div {
box-sizing: border-box;
border: 2px solid #000;
width: 400px;
margin: 10px;
padding: 10px;
font-size:20px;
line-break: anywhere;
}
.a {text-indent: -40px;} /* 單純凸排，畫面被裁切 */
.b {
padding-left: 50px; /* 設定內邊距，顯示凸排內容 */
text-indent: -40px;
}
.c {
padding-left: 60px; /* 設定內邊距，顯示凸排內容 */
text-indent: -50px;
}
.c img {
float: left; /* 設定圖片為靠左浮動 */
width: 40px;
margin-top: -24px; /* 設定圖片外邊距 */
margin-left: -50px;
}
</style>
小結
文字的行高 line-height 和縮排 text-indent，都是在網頁中表現大量文字時常用的樣式屬性，兩者在設定上也不困難，大多只需要設定數字就完成，透過這篇教學的介紹，應該就能對這兩個樣式有更深的認識。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～