line-height-step属性与行间距设置实例页面

展示

代码

• HTML：

  <article>
      <h2>标题内容</h2>
      <p>有个老头儿的狗死了，老头就把死狗打包托运准备带回家乡厚葬。但是托运的时候机场的人不知道是死的，下飞机的时候发现是死的，吓坏了。以为把狗托运死了。于是就派人去附近狗市买了一个一模一样的。后来这老头打开行李发现狗活了。于是老头给吓死了！</p>
  </article>

• CSS：

  article {
      --step-grid: 30px;
      display: flow-root;
      background: linear-gradient(#f4f39e 29px, #81cbbc 29px, #81cbbc 30px) repeat-y top / 100% 30px;
      line-height: var(--step-grid);
      line-height-step: var(--step-grid);
      min-height: 600px;
      width: 480px;
      max-width: calc(100% - 32px);
      margin: auto;
      padding: 0 1rem;
      box-sizing: border-box;
  }
  article h2 {
      font-size: 48px;
      margin: var(--step-grid) 0;
  }
  article p {
      font-size: 16px;
      margin: calc(var(--step-grid) / 2) 0;
      text-align: left;
  }