首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >出现在错误列中的部分和文本之间的间隙

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

Stack Overflow用户
提问于 2021-01-24 04:08:00
回答 1查看 30关注 0票数 2

我正在与一些链接和页脚的div工作,我有一些问题。

由于某种原因,两个部分之间都有白色的间隙。我使用了inspect,但它似乎是一个隐藏的边界块?我添加了边距-bottom/top: 0;,但它不起作用。有没有办法去掉它,这样从链接部分到页脚可以无缝过渡?

此外,链接部分中的问题词链接应该在第二列中(正如您所看到的,我对它进行了编码),但它出现在第一列中,我不确定为什么。

非常感谢你的帮助!

代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

EN

Stack Overflow用户

回答已采纳

发布于 2021-01-24 04:41:51

因为你用了P标签。并在默认情况下为其设置边距。移除它将解决差距问题。

代码语言:javascript
运行
复制
p {
  margin: 0;
}

对于第二个问题,您可以使用:

代码语言:javascript
运行
复制
.twocols {
    display: flex;
    /* column-count: 2; */
    /* column-gap: 5px; */
    /* padding-bottom: 20px; */
}

票数 2
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65863866

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档