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

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

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

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