Question

我将这四个div标签排列成2x2网格（中间一个仅用于换行）

<div class="rectangle"></div>
<div class="rectangle"></div>

<div class=""></div>

<div class="rectangle"></div>
<div class="rectangle"></div>

与此css一起：

.rectangle {
  width: 25px;
  height: 25px;
  background: #ccc;
  display: inline-block;
  margin: 0px;  /* doesn't work */
  padding: 0px; /* doesn't work */
}

JSFiddle结果输出显示矩形之间的间隙。有没有办法摆脱差距？

http://jsfiddle.net/brMPs/958/

Answer 1

您可以向左浮动矩形，也可以将DIV标记之间隐藏空格的字体大小清零。在这里，尝试添加容器div并使用

.container {
  font-size: 0;
}

http://jsfiddle.net/brMPs/963/

Answer 2

获得空格的原因是因为，元素之间有空格（换行符和几个标签计为空格，只是为了清楚）。最小化HTML将解决此问题，或其中一个技巧：

<div class="rectangle"></div><div
class="rectangle">
</div>

<div class=""></div>

<div class="rectangle"></div><div 
class="rectangle">
</div>

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

如何安排矩形div盒无间隙

2 个答案: