我的元素之间奇怪的空白

Question

所以出于某种原因，我的元素之间有一些空白（使用 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;
}

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;

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