如何排列没有间隙的矩形div框[重复]答案

【问题标题】：how to arrange rectangle div boxes without gaps [duplicate]如何排列没有间隙的矩形div框[重复]
【发布时间】：2018-04-01 02:44:58
【问题描述】：

我将这四个 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/

【问题讨论】：

google.com/search?q=inline-block+space+between, google.com/search?q=inline-block+space+under - 你研究了什么？

标签： css

【解决方案1】：

你得到空格的原因是，元素之间有空格（为了清楚起见，换行符和几个制表符算作空格）。最小化的 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/

【讨论】：

还有 jsfiddle jsfiddle.net/brMPs/964

【解决方案2】：

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

.container {
  font-size: 0;
}

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

【讨论】：