奇怪的白色空间在我的元素之间

Question

因为某些原因，我的元素之间存在一些空白（使用chrome浏览器）。我试过检查它，无法解决问题。不确定是什么原因造成的。我主持了一个演示页面here，以便您可以看到我在说什么。

所以任何想法会导致什么？我将在下面提供我的CSS以了解相关元素。如你所见，左边的蓝色元素没有同样的问题所以我认为它与齿轮元素有关。

这是我现在唯一的代码：

SELECT S_NAME FROM TABLE_1 WHERE S_ID = 1
UNION
SELECT I_NAME FROM I_TABLE WHERE I_ID IN (
   SELECT I_ID FROM E_TABLE WHERE S_ID = 1)
UNION
SELECT C_NAME FROM C_TABLE WHERE C_ID IN (
   SELECT C_ID FROM C_TABLE WHERE E_ID IN (
      SELECT E_ID FROM E_TABLE WHERE S_ID = 1))
UNION
SELECT P_NAME FROM P_TABLE WHERE C_ID IN (
   SELECT C_ID FROM C_TABLE WHERE E_ID IN (
      SELECT E_ID FROM E_TABLE WHERE S_ID = 1))
;

Answer 1

你看到的空格是html中的实际空格，内联元素之间会显示空白，最简单的解决方案就是浮动元素

.gear-item {
    position: relative;
    height: 320px;
    width: 320px;
    padding: 80px 25px 0px 55px;
    display: block;
    float:left;
    clear: none;
}

.gear-item:nth-child(even) {
    background: #252627;
}

Answer 2

内联元素对代码中的空白区域很敏感。删除代码中div之间的空格，空格消失。

Answer 3

使用inline-block引起的。显然这里描述了同样的问题：https://css-tricks.com/fighting-the-space-between-inline-block-elements/。所以它实际上是你标记中的空白！

快速修复将使用浮点代替gear-item：

display: block;
float: left;

（或我提到的链接中概述的其他一些解决方案）