行高行距与文字排版关系示意实例页面

展示

代码

• HTML：

  <div class="test test-1">
      <span>第1行</span><br><span>第2行</span>
  </div>
  <div class="test test-2">
      <span>第1行</span><br><span>第2行</span>
  </div>
  <div class="test test-3">
      <span>第1行</span><br><span>第2行</span>
  </div>

• CSS：

  .test {
      display: inline-block;
      font-family: simsun;
      font-size: 24px;
      background-color: yellow;
  }
  .test > span {
      outline: 1px solid red;
  }
  /* 换行实现，content章节有介绍 */
  .test > span:first-child:after {
      content: "\A";
      white-space: pre;
  }
  .test-1 {
      line-height: 2;
  }
  .test-2 {
      line-height: 1;
  }
  .test-3 {
      line-height: .5;
  }