文本行高 line-height

Docs

line-height 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

line-height 用于设置文本的行高
行高可以先简单理解为一行文字所占据的高度
行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母 x 最底部对齐的线
应用实例：假设 div 中只有一行文字，如何让这行文字在 div 内部垂直居中
- 让 line-height 等同于 height

注意区分 height 和 line-height 的区别

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

HTML
CSS

<div class="box number green">
  <h1>大漠异域，甘肃敦煌</h1>
  <p>
    一眼千年，梦回大唐，它是敦煌，也是河西走廊。在鸣沙山的夕阳里，太阳和月亮同时出现在地平线两端，云霞的余晖倾覆在远方沙漠的尽头，如它在历史的长河中，兴衰沉浮。孤独的月牙泉，几许悲壮，几许落寞。在莫高窟的洞窟里，斑驳的土层洞壁上，看看那些历经浩劫后残存下来的珍贵的画像，时间和颜料仿佛涣散在空气里，联通我们的血脉。
  </p>
</div>
<div class="box length blue">
  <h1>森林氧吧，贵州荔波</h1>
  <p>
    贵州旅游最该去的地方，我们都去错了，黔南州的荔波才是贵州的精华所在。说到自然风光，荔波有大小七孔和茂兰自然保护区。大小七孔被称作"地球上的绿宝石"，一路都是大大小小的清潭瀑布，呈现不同的蓝绿色水体，颇为宁静小众。茂兰自然保护区动植物极其丰富，户外徒步和野瀑布适合户外玩家。
  </p>
</div>
<div class="box percentage red">
  <h1>微风淡韵，江西婺源</h1>
  <p>江西上饶市的婺源是国内乡村旅游的首选目的地之一，有经典的徽派建筑，著名的晒秋文化，其中的篁岭是一座距今 600 余年历史的徽派古村。山居村落，房屋围绕水口呈扇形阶梯状错落排布，周边千棵古树环抱，万亩梯田簇拥，奇特的地形使得篁岭成为一个挂在悬崖上的村庄。</p>
</div>

.box {
  width: 12em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

/* number/unitless */
.number {
  line-height: 1.2;
  font-size: 10pt;
  border: solid limegreen;
}

/* length */
.length {
  line-height: 1.2em;
  font-size: 10pt;
  border: solid dodgerblue;
}

/* percentage */
.percentage {
  line-height: 120%;
  font-size: 10pt;
  border: solid crimson;
}

http://localhost:3000/line-height.html

大漠异域，甘肃敦煌

一眼千年，梦回大唐，它是敦煌，也是河西走廊。在鸣沙山的夕阳里，太阳和月亮同时出现在地平线两端，云霞的余晖倾覆在远方沙漠的尽头，如它在历史的长河中，兴衰沉浮。孤独的月牙泉，几许悲壮，几许落寞。在莫高窟的洞窟里，斑驳的土层洞壁上，看看那些历经浩劫后残存下来的珍贵的画像，时间和颜料仿佛涣散在空气里，联通我们的血脉。

森林氧吧，贵州荔波

贵州旅游最该去的地方，我们都去错了，黔南州的荔波才是贵州的精华所在。说到自然风光，荔波有大小七孔和茂兰自然保护区。大小七孔被称作"地球上的绿宝石"，一路都是大大小小的清潭瀑布，呈现不同的蓝绿色水体，颇为宁静小众。茂兰自然保护区动植物极其丰富，户外徒步和野瀑布适合户外玩家。

微风淡韵，江西婺源

江西上饶市的婺源是国内乡村旅游的首选目的地之一，有经典的徽派建筑，著名的晒秋文化，其中的篁岭是一座距今 600 余年历史的徽派古村。山居村落，房屋围绕水口呈扇形阶梯状错落排布，周边千棵古树环抱，万亩梯田簇拥，奇特的地形使得篁岭成为一个挂在悬崖上的村庄。

css-line-height

HTML
CSS

<div class="normal">
  <span class="keyword">height: 66px; → </span>
  绿色、低碳、可持续发展道路 a path of green, low-carbon and sustainable development
</div>
<div class="box1">
  <span class="keyword">height: 66px; line-height: 66px; 垂直居中 → </span>
  节能减排 energy conservation and emission reduction
</div>
<div class="box2">
  <div class="box3">
    <span class="keyword">height: 66px; line-height: 132px; → </span>
    绿色转型 green transition
  </div>
</div>

.normal,
.box1,
.box2,
.box3 {
  width: 80%;
  font-size: 16px;
  color: rgb(57, 57, 78);
  background-color: skyblue;
  border: 3px dotted darkgreen;
  margin-top: 10px;
}

.keyword {
  background-color: rgba(30, 144, 30, 0.6);
  font-weight: bold;
}

.normal {
  height: 66px;
}

.box1 {
  height: 66px;
  line-height: 66px;
}

.box2 {
  height: 132px;
  line-height: 66px;
}

.box3 {
  height: 66px;
  line-height: 132px;
}

http://localhost:3000/line-height.html

height: 66px; → 绿色、低碳、可持续发展道路 a path of green, low-carbon and sustainable development

height: 66px; line-height: 66px; 垂直居中 → 节能减排 energy conservation and emission reduction

height: 66px; line-height: 132px; → 绿色转型 green transition