html - 容器之间的白色间距

Question

我有两个容器彼此叠放，它们之间没有空白。只有当我使用 < br > 标签时，才会出现空白。我可以用另一个容器解决这个问题吗？需要以下 CSS 代码来获取我的“缩写”页面的布局:http://www.16thinfantry.com/help/army-abbreviations/ .

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

.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

您要求的在 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>