如何摆脱盒子之间的空间？

Question

我正在尝试学习HTML和CSS，并试图弄清楚如何将框架彼此排列。我设法安装了两个盒子的“宽度：50％”；彼此相邻，但它们之间仍然有一个空白，我想知道这个空白是什么以及如何摆脱它。这是codepen上的代码的链接： box

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
}

section {
  white-space: nowrap;
}

<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>

Answer 1

因此，您实际的HTML代码中的空格（默认情况下）被解释为文本（尽管连续的多个白色空间确实被凝结成一个单一空间，就像这里发生的那样）。您可以说是这种情况，因为如果悬停在缝隙上，光标会更改为I光束，并且实际上可以选择该空间。

---

一种解决方案只是在您的两个div标签之间没有空格，例如，

</div>

<div>

另一个解决方案

</div><div>

---

就是使用

Answer 2

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
}

section {
  white-space: nowrap;
  display:flex;
}

<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>

只需在您的“部分”样式中添加显示：flex;。

Answer 3

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
  float:left
}

section {
  white-space: nowrap;
}

<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>