包括行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的{​​{1}}属性即可。例如，要填充日期的底部，请更改css的div部分：

.date

将.date { color: #aaa; font-size: 11px; padding-bottom: 40px; } 更改为您想要的填充。您可以通过这种方式为任何40px指定填充。