三个元素中的两个元素之间的意外差距[CSS] [重复]

Question

我一直在复习一些 CSS 定位，因为我对上述概念缺乏熟练程度，并且我可以跨越三个容器中的两个容器之间的一些意外和无法解释的差距。我将在下面附上 HTML 和 CSS 的代码以及输出屏幕截图，以使其不那么晦涩。

body {
  margin: 0;
  padding: 0;
}

.red-container {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 200px;
  display: inline-block;
}

.blue-container {
  height: 100px;
  width: 100px;
  background-color: blue;
  position: relative;
  display: inline-block;
}

.yellow-container {
  height: 100px;
  width: 100px;
  background-color: yellow;
  position: relative;
  display: inline-block;
}

<div class="red-container"></div>
<div class="blue-container"></div>
<div class="yellow-container"></div>

Answer 1

使用flex-box、flex in css tricks

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
}

.red-container {
  height: 100px;
  width: 100px;
  background-color: red;
}

.blue-container {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.yellow-container {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="wrapper">
  <div class="red-container"></div>
  <div class="blue-container"></div>
  <div class="yellow-container"></div>
</div>

在不使用flex-box的情况下消除间隙

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: block;
  float: left;
  height: 100px;
  width: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class="red container"></div>
<div class="blue container"></div>
<div class="yellow container"></div>