文字行高与缩排

透过网页显示具有大量文字的文章时，通常都会设定文字的“行高”或“缩排”，这篇教学会介绍“什么是行高”，以及运用 line-height 和 text-indent 这两个 CSS 样式属性，设定文字的行高和缩排。

快速导览：

• 认识行高
• line-height 行高
• line-height 不同属性值在继承时的差异
• text-indent 缩排

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识行高

网页中的每个文字，除了本身的字型设定的尺寸，也会根据字型定义产生“内容区域 content area”，默认的行高和内容区域的高度相同，大部分情况为字型尺寸的 1.2 倍，如果有设定行高数值，则会以“中心线”向上下扩展至设定的数值，下图呈现文字尺寸 ( 深蓝色 )、内容区域 ( 浅蓝色 ) 和行高 ( 蓝色虚线 ) 的关系。

在父元素里，每一行都会产生一个“行框”摆放在该行里的元素，如果在同一行里面，使用不同的文字字型或尺寸的元素，默认会先对齐“基准线 baseline”，因为每个字型的内容区域和中心线都不同，会根据该行中所有的行高找出“最大值”，如果数值大于行框高度，就会采用这个数值作为“行框的高度”，行框默认的高度等于父元素的行高。

line-height 行高

line-height 样式属性可以设定文字的“行高”，属性值可以的用 normal 或非负值的数字，行高的样式通常会设在父元素 ( 如此一来才能准确掌握行框高度 )，运用继承特性，让子元素继承“父元素的行高”，行高会改变“行框高度”，进而会影响显示类型为“区块容器 block”的元素高度，但不会影响显示类型为“行内容器 inline”或“行内容器相关 inline-*”的元素高度，虽然不影响元素实际高度，但由于行框的高度已经改变，所以仍然会影响到周围元素的位置。

参考：容器显示类型 ( display )、行内容器排版格式 ( IFC )

行高可以使用多种数值与单位，下表列出属性值说明：

下方范例使用 h3 元素包覆文字，并透过 line-height 设定不同的行高，透过背景颜色就能观察出行高影响行框并影响元素的变化，浅色是 span 背景，深色是 h3 背景。

线上展示：https://codepen.io/oxxo/pen/BaemWbj

<!-- HTML 程式碼 --> 
<h3 class="a"><span>Morning!! (line-height: normal;)</span></h3>
<h3 class="b"><span>Morning!! (line-height: 1;)</span></h3>
<h3 class="c"><span>Morning!! (line-height: 1em;)</span></h3>
<h3 class="d"><span>Morning!! (line-height: 100%;)</span></h3>
<h3 class="e"><span>Morning!! (line-height: 30px;)</span></h3>
<h3 class="f"><span>Morning!! (line-height: 0.3;)</span></h3>
<h3 class="g"><span>Morning!! (line-height: 3;)</span></h3>

<!-- CSS 程式碼 -->
<style>
  h3 {
    font-size: 20px;
    background: orange;
    border: 1px solid #000;
  }
  h3 span {
    background: #fff7;
  }
  .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>

如果子元素是空元素 ( 没有任何内容 )，因为没有任何“字型”出现，所以不存在内容区域，使用 line-height 也就没有任何作用，而换行符 <br> 会被放在行框里，直接套用父元素的行高，下方范例会展示空元素、换行符与有内容的差异。

线上展示：https://codepen.io/oxxo/pen/MWdRQZJ

<!-- HTML 程式碼 --> 
<div class="a"><span></span></div>   <!-- 子元素為空元素 -->
<div class="b">
  <br>             <!-- 換行符 -->
</div>
<div class="c"> 有設定行高，沒有子元素</div>
<div class="c"> <span>有設定行高，有子元素</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 250px;
    border: 1px solid #000;
    background: orange;
    margin: 10px;
    line-height: 1.5;
  }
</style>

line-height 不同属性值在继承时的差异

如果一行文字里有多种不同的字型，或有不同尺寸的文字，会运用这些不同的行高，计算出“最大行高”撑开该行的行框，特别注意，由于行高会“继承”，“无单位”和“有单位”的属性数值在继承的表现上有极大的差异，这种差异会明显影响不同元素进行“垂直置中”的对齐，甚至会产生出现“超出范围”或“莫名空白”等奇怪状况，下方列出继承表现的差异：

• 无单位数值：继承“无单位数值”，子元素的行高会重新计算 ( 乘以自己的文字尺寸 )。
• px 单位数值：继承“固定尺寸”。
• em、% 单位数值：先乘以父元素的文字尺寸，接着继承“计算后的结果”，等同继承固定尺寸，但需要先换算。

下方使用五个 div，分别表现不同属性值的继承特性 ( 粉红色 div 为对照组高度 120px )，从中可以观察当设定为 1 的时候，继承后会使用自己计算的行高，对齐时采用“最大行高”，高度也就和粉红区域相同，但设定为 6 的时候，子元素的行高也出现 120px，但因为默认“对齐基线”，也就造成下方凸出的状况，其他设定 px、em 和 % 会直接继承 120px，就会产生和设定 6 相同的状况。

线上展示：https://codepen.io/oxxo/pen/mdYqpQZ

<!-- HTML 程式碼 --> 
父元素行高使用無單位數值 1
<section class="s1">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
父元素行高使用無單位數值 1，子元素設定 6
<section class="s2">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
父元素行高使用 px 單位數值
<section class="s3">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
父元素行高使用 em 單位數值
<section class="s4">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
父元素行高使用 % 單位數值
<section class="s4">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 150px;
    margin: 10px;
  }
  div {
    background: orange;
    float: left;
    font-size: 120px;
  }
  .s1 div {line-height: 1;}
  .s2 div {line-height: 1;}
  .s2 div * {line-height: 6;}
  .s3 div {line-height: 120px;}
  .s4 div {line-height: 1em;}
  .s5 div {line-height: 100%;}
  .a {
    font-size: 20px;
    background: #0f08;
  }
  .b {
    font-size: 10px;
    background: #00f6;
  }
  .d2 {
    height: 120px;
    background: pink;
    width: 20px;
  }
</style>

行框高度除了被行高影响，行框高度也会“不具有行高属性，但具有高度属性的元素”所影响 ( 例如 inline-block 类型的图片元素 )，当整体计算高度大于图片高度时，在某些垂直对齐的情况下，图片下方就会一个空白区域，如果要避免这种状况，可以缩小行高数值，当计算后数值小于图片高度，就不会出现空白区域。

线上展示：https://codepen.io/oxxo/pen/JjqVpmL

<!-- HTML 程式碼 --> 
<div class="a">
  <span>line-height: 0px;</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="b">
  <span>line-height: 10px;</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="c">
  <span>line-height: 30px;</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="d">
  <span>line-height: 50px;</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 250px;
    border: 1px solid #000;
    background: orange;
    margin: 20px;
  }
  img {height: 80px;}
  .a {line-height: 0;}
  .b {line-height: 10px;}
  .c {line-height: 30px;}
  .d {line-height: 60px;}
</style>

text-indent 缩排

text-indent 样式属性可以设定“第一行文字缩排”，具有继承特性，如果第一行开头是 inline-block 显示属性的元素 ( 例如图片 )，这个元素也会跟着缩排，属性值需为具有长度单位的数字，长度单位说明如下：

下方范例使用不同的数字单位，呈现缩排 40px 的效果。

线上展示：https://codepen.io/oxxo/pen/bGyYBPv

<!-- 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 设定边界，下方范例展示一些凸排的效果。

线上展示：https://codepen.io/oxxo/pen/xxNPgXE

<!-- 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，都是在网页中表现大量文字时常用的样式属性，两者在设定上也不困难，大多只需要设定数字就完成，透过这篇教学的介绍，应该就能对这两个样式有更深的认识。

意见反馈