html - White spacing between <div> containers -
i have 2 containers on top of each other, , there no white space between them. when use < br > tag, white space appear. can solve container? css code below needed layout "abbreviations" page: http://www.16thinfantry.com/help/army-abbreviations/.
there has white spacing between every container abbreviations. first a, b, 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>
what asking called margins
in css. add space between divs. can see 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>
Comments
Post a Comment