Flex Box CSS问题

Question

根据下面的图片，我在理解为什么我的盒子之间存在间隙时遇到了问题。我试图缩小这种差距而没有成功。

我正在使用Flexbox进行此布局。我并没有在相关部分中包含所有代码。

CSS代码

html {
  height: 100%;
  font-family: sans-serif;
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
}

.column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#left {
  flex-shrink: 0;
  background-color: #333;
  color: white;
}

#right {
  background-color: #f3f3f3;
  width: 100%;
}

.top-left {
  flex-shrink: 0;
  background-color: #333;
  color: white;
  padding: 20px;
}

.top-right {
  display: inline-flex;
  flex-shrink: 0;
  background-color: #333;
  color: white;
  padding: 20px;
}

.bottom {
  flex-grow: 1;

  overflow-y: auto;
  padding: 20px;
}

ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
}

li {
  margin-right: 20px;
}

/*Box Styleing*/

.mainDashboard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.mainDashboard>div:first-child {
  flex: 0 0 100%;
  background-color: yellow;

}
#Title {
  margin: 0;
  padding: 0;
  height: 100px;
}
.box1 {
  flex-grow: 1;
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.box2 {
  flex-grow: 1;
  background-color: red;
  width: 100px;
  height: 100px;
}
.box3 {
  flex-grow: 1;
  background-color: blue;
  width: 100px;
  height: 100px;
}
.box4 {
  flex-grow: 1;
  background-color: green;
  width: 100px;
  height: 100px;
}

这是创建框和标题的HTML

<div id="Title">
  <p>Asset Dashboard</p>
</div>

<div class="box1">
  <p>I am box1</p>
</div>

<div class="box2">
  <p>I am box2</p>
</div>

<div class="box3">
  <p>I am box3</p>
</div>

<div class="box4">
  <p>I am box4</p>
</div>

Answer 1

希望您还好，事实上您正在使用p标签可能是原因，请尝试删除p并使用div代替？

我认为您希望盒子之间没有空隙吗？

<div id="Title">
Asset Dashboard
</div>


 <div class="box1">

 I am box1

</div>
 <div class="box2">

 I am box2

 </div>
 <div class="box3">

 I am box3

 </div>
 <div class="box4">

 I am box4

 </div>