Question

HTML：

<div id='container'>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
</div>

CSS：

#container {
    width: 960px;
    height: 960px;
    background-color: #ccc;
}

.box {
    width: 300px;
    height: 300px;
    background-color: blue;
    display: inline-block;
}

结果：https://jsfiddle.net/58fmcabz/

当我在显示属性中use table-cell时，间隙消失。我尝试使用.box类删除边距和填充无效。为什么会出现差距呢？

Answer 1

简单的解决方案是为元素添加一个浮点数：

.box{width:300px; height:300px; display:inline-block; background-color:blue; float:left;}

它解决了。内联块属性有点令人毛骨悚然，当我遇到问题时，我不得不忍受一整天，一个简单的浮点解决了这个问题。

有人在这里问了同样的问题 - Unwanted margin in inline-block list items

Answer 2

本质上。

这是给你的链接： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

试试这个......

.box {
     width: 300px;
     height: 300px;
     background-color: blue;
     display: inline-block; 
     float:left;
}

CSS显示元素之间的内联块间隙

3 个答案: