Question

为什么div之间有余量？我试图通过不同的方法删除它，但没有任何效果。我不得不减少它们的宽度以便将它们堆成行。

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: 5% auto;
  padding: 0;
}

.box{
  display: inline-block;
  margin: 0px;
  background-color: #f1f1f1;
  width: 248px;
  height: 250px;
  border: 0 !important;
  font-size: 0;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

问题是div之间有空格。两种可能的解决方案：

1：

<div class="wrapper">
  <div class="box">

  </div><div class="box">

  </div><div class="box">

  </div><div class="box">

  </div>
</div>

-

.box { display: block; } // not multiple elements in one line, if you want this

2：

.wrapper { font-size: 0px; }
.box { display: block; } // not multiple elements in one line, if you want this

Answer 2

制作.box 250px的宽度，并将'float：left'属性添加到.box

.box{
display: inline-block;
margin: 0px;
padding: 0;
background-color: #ff9900;
width: 250px;
height: 250px;
float: left;
}

Fiddle

Answer 3

由于您的display: inline-blocks，您的块元素之间会出现空格。

有许多相同的决议，请参阅David Walsh's blog

我更喜欢在这里使用float代替display: inline-block。

参考代码：

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: 5% auto;
  padding: 0;
}

.box{
  float: left;
  margin: 0px;
  background-color: #f1f1f1;
  width: 248px;
  height: 250px;
}

<div class="wrapper">
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
  <div class="box">
    
  </div>
</div>

Answer 4

由于显示的原因，导致两个div之间空间不大的因素是：你已经添加到box类的inline-block，只需添加float：left;相同，它会消失。

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: 5% auto;
  padding: 0;
}

.box{
display: inline-block;
margin: 0px !important;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
float: left;
}

<div class="wrapper">
  <div class="box" style="background: rebeccapurple;">
    
  </div>
  <div class="box"  style="background: orange;">
    
  </div>
  <div class="box" style="background: orange;">
    
  </div>
  <div class="box" style="background: rebeccapurple;">
    
  </div>
</div>

Answer 5

尝试在受影响的所有div上设置border: 0 !important，一旦遇到类似的问题，发现div正在继承1px边框，这会破坏宽度。

Answer 6

您将它们显示为内联块，因此代码格式化过程中它们之间的空白区域仍然显示为与任何其他内联元素一样。

您需要重新格式化代码，或者将包装器设置为零字体，以免渲染。

Answer 7

尝试使用

*{
  box-sizing: border-box;
}

.wrapper{
  background-color: #ccc;
  width: 500px;
  margin: auto;
  padding: 0;
   display: block;
   background: green;
}

.box{
  display: block;
  margin: 0px;
  width: 248px;
  height: 250px;
  background: red;
  padding: 0;
  float: left;
}

显示：内联块创建该边距。或者你可以试试 .wrapper {font-size：0;} .box {display：inline-block;}

如何删除div元素之间的边距

7 个答案: