<div>容器之间的白色间距

Question

我有两个容器在彼此的顶部，它们之间没有空白区域。只有当我使用＆lt; br＆gt;标签，将出现空白区域。我能用另一个容器解决这个问题吗？需要下面的CSS代码来获取我的＆＃34;缩写＆＃34;的布局。页面：http://www.16thinfantry.com/help/army-abbreviations/。

每个容器之间必须有一个带有缩写的白色间距。先是A，然后是B，然后是C，等等。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您要求的内容在CSS中称为margins。只需在div之间添加空格即可。你可以在这里看到：

.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>