Include different spacing between lines css

Question

I’m new to using css and I’m trying to create a page with a title, date, and description. I can’t figure out the best way to include different amounts of padding between the different sections. I want the date to come immediately underneath the title and then to have some space between the date and description, but right now a larger amount of space appears between the title and date and less space between the date and description. I am using nunjucks as a template. Any help would be appreciated!

From Mainpage.nunjucks:

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

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

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

From 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

You can simply specify the padding-bottom property of the div you want to pad. For example to pad the bottom of the date, change the .date section of your css:

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

Change the 40px to whatever padding you want. You can specify the padding in this way for any div.