在行之间包含不同的间距 css

Question

我刚开始使用 css，我正在尝试创建一个包含标题、日期和描述的页面。我想不出在不同部分之间包含不同数量的填充的最佳方法。我希望日期紧接在标题下方，然后在日期和描述之间有一些 space，但现在标题和日期之间出现了更多的 space 而更少 space 在日期和描述之间。我正在使用 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.

指定填充

在行之间包含不同的间距 css

Include different spacing between lines css

html

css

whitespace

nunjucks