html - 包括行之间的不同间距css

Question

我是使用 css 的新手，我正在尝试创建一个带有标题、日期和描述的页面。我想不出在不同部分之间包含不同填充量的最佳方法。我希望日期直接出现在标题下方，然后在日期和描述之间留出一些空格，但是现在标题和日期之间出现了更大的空间，而日期和描述之间的空间更少了。我使用 nunjucks 作为模板。任何帮助，将不胜感激！

来自 Mainpage.nunjucks：

<div class="title">
    {{ options.title }}
</div>

<div class="date">
    Created {{ options.date }}
</div>

<div class="subtitle">
    {{ options.description }}
</div>

来自 common.scss：

.Mainpage {
    padding: 20px 0;

    div {
        padding: 5px 0;
    }

    .subtitle {
        font-size: 12px;
        font-weight: normal;
    }

    .date {
        color: #aaa;
        font-size: 11px;
    }
}

Answer 1

您可以简单地指定要填充的padding-bottom属性。div例如，要填充日期的底部，请更改.dateCSS 的部分：

.date {
    color: #aaa;
    font-size: 11px;
    padding-bottom: 40px;
}

将 更改为40px您想要的任何填充。您可以通过这种方式为任何div.