html - 出现在错误列中的部分和文本之间的间隙

问题描述

我正在处理一个带有一些链接和页脚的 div，但我遇到了一些问题。

由于某种原因，两个部分之间存在白色间隙。我使用了检查，它似乎是一个隐藏的边距块？我添加了 margin-bottom/top: 0;，但它没有用。有什么方法可以删除它，以便从链接部分到页脚的无缝过渡？

此外，链接部分中的问题词链接应该在第二列中（我对其进行了编码，以便您看到），但它出现在第一列中，我不知道为什么。

非常感谢你的帮助！

.footerwrapper {
  padding: 10px 20px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 120px;
  background-color: #333;
}

.contentcontainer {
  margin: 0 260px 0 260px;
  max-width: 960px;
  height: 440px;
  width: 960px;
  display: block;
  box-sizing: border-box;
}

.footitle p {
  text-align: left;
  color: #EEEEEE;
  font-size: 28px;
}

.twocols {
  column-count: 2;
  column-gap: 5px;
  padding-bottom: 20px;
}

.twocolsblock1 .twocolsblock2 {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  width: auto;
  align-items: center;
}

.lessonlinktitle.footer {
  color: #E5E5E5;
  font-size: 18px;
  line-height: 25px;
  cursor: pointer;
  word-spacing: 0px;
  display: block;
  outline: rbg(255, 0, 0) dashed 1px;
  width: 306px;
  text-decoration: none solid rgba(203, 203, 193, 0.77) !important;
}

.lessonlinkblurb.footer {
  color: #CBCBC1;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  word-spacing: 0px;
  display: block;
  outline: rbg(255, 0, 0) dashed 1px;
  width: 306px;
  text-decoration: none solid rgba(203, 203, 193, 0.65) !important;
}


/********* Footer ************/

.footerwrapper.bottom {
  background-color: #111;
  position: relative;
  font-size: 13px;
  margin: 0;
  min-height: 100%;
  padding: 0;
  background: #1f1c1f;
  color: #FFFFFF;
  text-align: center;
  height: 30px;
  font-family: 'Nunito Sans', sans-serif;
}

<div class="footerwrapper">
  <div class="contentcontainer">
    <div class="footitle">
      <p id="learn">Learn Chokwe</p>
    </div>
    <div class="twocols">
      <div class="twocolsblock1">

        <a href="/greetings.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Greetings & Introductions</div>
          <div class="lessonlinkblurb footer">How to greet and introduce yourself in Chokwe</div>
        </a>

        <br>
        <a href="/family.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Family</div>
          <div class="lessonlinkblurb footer">How can you describe your family in Chokwe?</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Numbers</div>
          <div class="lessonlinkblurb footer">How to count in Cokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Days of the Week</div>
          <div class="lessonlinkblurb footer">How to say the days of the week in Chokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Months of the year</div>
          <div class="lessonlinkblurb footer">How to say the months of the year in Chokwe</div>
        </a>

        <br>
        <a href="/timenumbers.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Time and time concepts</div>
          <div class="lessonlinkblurb footer">How say early, late, always and other concepts in Chokwe</div>
        </a>

      </div>

      <div class="twocolsblock2">

        <a href="/learn-italian/question-words" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Question words</div>
          <div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How to ask questions in Chokwe</div>
        </a>

        <br>
        <a href="/travelling.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Travelling</div>
          <div class="lessonlinkblurb footer">Need to get to travel somewhere? Learn how to do it in Chokwe</div>
        </a>

        <br>
        <a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Shopping</div>
          <div class="lessonlinkblurb footer">Let's go shopping and see how to buy items in Chokwe</div>
        </a>

        <br>
        <a href="/verbs.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Important Verbs</div>
          <div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. How to use verbs in Chowke</div>
        </a>

        <br>
        <a href="/proverbs" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Proverbs</div>
          <div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
        </a>

        <br>
        <a href="/phrases.html" class="lessonlink w-inline-block" style="text-decoration:none">
          <div class="lessonlinktitle footer">Phrases</div>
          <div class="lessonlinkblurb footer">Extra phrases in Chokwe that may be handy</div>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="footerwrapper bottom">
  <p> ©2020 | Chokwe Language </p>
</div>
</body>

标签： htmlcss

html - 出现在错误列中的部分和文本之间的间隙

问题描述

解决方案

推荐阅读