两个内联块堆栈之间的垂直空间

Question

我的代码中有6个div，我希望彼此相邻。我不知道为什么div“五”和“六”不起作用。我在另一个使用相同的规则，它的工作原理。当我从“container1”中删除“font-size：0”时，它是我想要的结果，但div之间有一些空格。有什么想法吗？

body, html {
  height: 100%;
  width: 100%;
}
.container1{
  height: 100%;
  margin-left: 8%;
  margin-right: 8%;
  font-size: 0;
}
.three{
  display: inline-block;
  position: relative;
  width: 60%;
  height: 50%;
  background-color:aquamarine;
}
.four {
  display: inline-block;
  position: relative;
  float: right;
  width: 40%;
  height: 50%;
  background-color: dodgerblue
}
.five {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 40%;
  background-color: red;
}
.six {
  display: inline-block;
  position: relative;
  float: right;
  background-color: black;
  width: 50%;
  height: 40%;   
}

<div class="container1">
  <div class="header">
    <h1>jadalnia</h1>
  </div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
</div>

Answer 1

试试这个CSS而不是你的。

＆＃13;

＆＃13;

  body, html {
  height: 100%;
  width: 100%;
}
.container1{
  height: 100%;
  margin-left: 8%;
  margin-right: 8%;
}
.three{
  float:right;
  width: 60%;
  height: 50%;
  background-color:aquamarine;
}
.four {
  float: right;
  width: 40%;
  height: 50%;
  background-color: dodgerblue
}
.five {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 40%;
  background-color: red;
}
.six {
  display: inline-block;
  position: relative;
  float: right;
  background-color: black;
  width: 50%;
  height: 40%;   
}

＆＃13;

<div class="container1">
  <div class="header">
    <h1>jadalnia</h1>
  </div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <div class="six"></div>
</div>

＆＃13;

＆＃13;

＆＃13;