Question

检查以下代码：

为什么div有空间？如何删除它们（不使用浮动）？

* {
  padding: 0px;
  margin: 0px;
}
.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

<div id="container">
  <div class="section">a</div>
  <div class="section">b</div>
  <div class="section">c</div>
  <div class="section">d</div>
  <div class="section">e</div>
</div>

Answer 1

有几种方法可以解决这个问题。我最喜欢的是：

* {
  padding: 0px;
  margin: 0px;
}

#container {
  letter-spacing: -0.32em;
}

.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  letter-spacing: normal;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

Here is a fiddle

Answer 2

我认为问题在于div是一个换行符，它在生成的HTML中被解释为一个空格。

尝试将其更改为：

<div id="container">
  <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div>
</div>

如果您想保留一些空格，只需将其包含在评论中：

<div id="container">
     <div class="section">a</div><!--
  --><div class="section">b</div><!--
  --><div class="section">c</div><!--
  --><div class="section">d</div><!--
  --><div class="section">e</div>
</div>

最后，您可以更改display: inline-block;到display: table-cell，但是你需要重新处理部分宽度。

Answer 3

最佳答案是@emmanuel one（见问题评论）。即使没有文本，空格beetwen div也会计算。

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
.section {
  display: inline-block;
  width: 20%;
  min-height: 50px;
  box-sizing: border-box;
  border: solid 1px;
  /*float: left;*/
}

＆＃13;

<div id="container">
  <div class="section">a</div><!--
  --><div class="section">b</div><!--
  --><div class="section">c</div><!--
  --><div class="section">d</div><!--
  --><div class="section">e</div>
</div>

＆＃13;

Answer 4

试试这个： -

<div id="container">
  <div class="section">a</div><div class="section">b</div><div class="section">c</div><div class="section">d</div><div class="section">e</div>
</div>

<强> Demo

CSS疯狂内联阻止不可移除的边际

4 个答案: