html - 使用 css 删除 2divs 之间不需要的空格

Question

您好，我创建了这个简单的设计:

body{
  background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
  margin: auto;
}

#panel{
  height: 100%;
  width: 300px;
  background-color: #232325;
  float: right;
}

#audio{
  width: 100%;
  height: 11%;
  background-color: red;
}
#term{
  width: 100%;
  height: 11%;
  background-color: blue;
}
#content{
  width: 100%;
  height: 67%;
  background-color: green;
}
#footer{
  width: 100%;
  height: 11%;
  background-color: pink;
}
.term{
  background-color: black;
  height: 100%;
  width: 25%;
  display: inline-block;
  border-right: solid red;
}
.term:first-child{
  margin-left: 0;
}
.term:last-child{
  border-right: none;
}

<div id="panel">
  <div id="header">
    <div id="audio"></div>
    <div id="term">
      <div class="term"></div>
      <div class="term"></div>
      <div class="term"></div>
      <div class="term"></div>
    </div>
  </div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

但是当我看到结果时，术语 div 中的 div 彼此之间有一些空间。将 padding 和 margin 设置为零不会删除空格。

我应该怎么做才能删除空间以将 div 彼此完全靠近？

Answer 1

一种解决方案是在 term 容器中使用 display: flex:

body {
    background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
    margin: auto;
}
#panel {
    height: 100%;
    width: 300px;
    background-color: #232325;
    float: right;
}
#audio {
    width: 100%;
    height: 11%;
    background-color: red;
}
#term {
    width: 100%;
    height: 11%;
    background-color: blue;
    display: flex;/*Add display flex*/
}
#content {
    width: 100%;
    height: 67%;
    background-color: green;
}
#footer {
    width: 100%;
    height: 11%;
    background-color: pink;
}
.term {
    background-color: black;
    height: 100%;
    width: 25%;
    display: inline-block;
    border-right: solid red;
}
.term:first-child {
    margin-left: 0;
}
.term:last-child {
    border-right: none;
}

<div id="panel">
    <div id="header">
        <div id="audio"></div>
        <div id="term">
            <div class="term">asd</div>
            <div class="term">asd</div>
            <div class="term">asd</div>
            <div class="term">asd</div>
        </div>
    </div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

引用

flex