Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

但是当我看到结果时，术语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

Answer 2

问题是Inline-block有一些默认空格，

使用Float比Inline-block更好并使用clearfix类：

#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}

.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}

http://jsfiddle.net/n0zxmgoy/

Answer 3

如前所述，内联块之间的任何空白都保留在布局中，因此单向摆脱它是为了确保内联块元素没有居间空间在HTML标记中。

此外，您需要设置参考高度，以便高度百分比值按预期工作。我通过将height: 100%添加到html和body代码来完成此操作。

此外，请确保将高度值添加到#header元素，这将进行算术运算更容易处理。

一个微妙的点涉及.term元素的右边界。你可以使用 CSS calc值或box-sizing: border-box，您可以尝试。

html, body {
  height: 100%; /* this may be needed... */
}

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;
}
#header {
  width: 100%;
  height: 22%;
}

#audio{
  width: 100%;
  height: 11%;
  background-color: red;
}
#term{
  width: 100%;
  height: 50%;
  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: calc(25% - 2px);
  /* box-sizing: border-box; optional alternative */
  display: inline-block;
  border-right: 2px solid red;
}
.term:first-child{
  margin-left: 0;
}
.term:last-child{
  border-right: none;
  width: 25%; /* you need to consider this... */
}

<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>

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

3 个答案: