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;
}