White spacing between <div> containers

Question

I have two containers on top of each other, and there is no white space between them. Only when I use a < br > tag, white space will appear. Can I solve this with another container? The CSS code below is needed to get the layout for my "Abbreviations" page: http://www.16thinfantry.com/help/army-abbreviations/.

There has to be a white spacing between every container with abbreviations. First A, then B, then C, etc.

.toc-layout > dl {
        padding: 0;
        overflow-x: hidden;
        list-style: none;
}

.toc-layout > dl > dt {
        position: relative;
}

.toc-layout > dl > dt:before {
        position: absolute;
        bottom: 0;
        font-weight: normal;
        overflow: visible;
        z-index: -1;
        white-space: nowrap;
        content: ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
}

.toc-layout > dl > dd {
        margin: 0 0 0.5em 0;
        padding: 0;
}

.toc-layout > dl > dt > .title {
        font-weight: normal;
        padding-right: .33em;
        padding-left: .1em;
        background: white;
        margin-right: 6em;
}

.toc-layout > dl > dt > .page {
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 0.33em;
        background: white
}

.toc-layout h4 {
        font-size: larger;
        font-weight: bold;
        text-align: center;
}

<div class="toc-layout">
    <dl>
        <dt>
            <span class="title">Baggage</span> 
            <span class="page">Bag</span>
        </dt>
      </dl>
</div>
  <div class="toc-layout">
    <dl>
        <dt>
            <span class="title">Baggage</span> 
            <span class="page">Bag</span>
        </dt>
      </dl>
</div>

Answer 1

What you are asking for are called margins in CSS. Simply they add space between divs. You can see that here:

.toc-layout {
        margin-bottom: 100px;
}

.toc-layout > dl {
        padding: 0;
        overflow-x: hidden;
        list-style: none;
}

.toc-layout > dl > dt {
        position: relative;
}

.toc-layout > dl > dt:before {
        position: absolute;
        bottom: 0;
        font-weight: normal;
        overflow: visible;
        z-index: -1;
        white-space: nowrap;
        content: ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
                 ".................."
}

.toc-layout > dl > dd {
        margin: 0 0 0.5em 0;
        padding: 0;
}

.toc-layout > dl > dt > .title {
        font-weight: normal;
        padding-right: .33em;
        padding-left: .1em;
        background: white;
        margin-right: 6em;
}

.toc-layout > dl > dt > .page {
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 0.33em;
        background: white
}

.toc-layout h4 {
        font-size: larger;
        font-weight: bold;
        text-align: center;
}

<div class="toc-layout">
    <dl>
        <dt>
            <span class="title">Baggage</span> 
            <span class="page">Bag</span>
        </dt>
      </dl>
</div>
  <div class="toc-layout">
    <dl>
        <dt>
            <span class="title">Baggage</span> 
            <span class="page">Bag</span>
        </dt>
      </dl>
</div>