Html 我的元素之间有奇怪的空白

因此，由于某些原因，我的元素之间存在一些空白（使用chrome浏览器）。我试图检查它，但无法解决问题。根本不知道是什么引起的。我主持了一个演示页面，所以你可以看到我在说什么。

你知道是什么原因造成的吗？我将在下面提供有关元素的CSS。正如你所看到的，左边的蓝色元素没有同样的问题，所以我认为它与齿轮元素有关

这是我目前仅有的代码：

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

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

---

您看到的空白是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;
}

---

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

这是使用

内联块造成的。显然，此处描述的问题相同：。所以它实际上是标记中的空白

一个快速解决方法是使用浮动代替
齿轮项目
：

display: block;
float: left;

（或者我提到的链接中列出的一些其他解决方案）
您指的是哪个空白？在黑匣子上面？您是否尝试过将边距/填充归零？重复可能重复的