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

-2

所以由于某些原因，我的元素之间有一些空白（使用chrome浏览器）。我试图检查它，并不能解决问题。不知道可能是什么原因导致它。我主持了一个演示页面here，以便您可以看到我在说什么。奇怪的空白在我的元素之间

因此，任何想法会导致这种情况？我将在下面提供我的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; 
}

来源

2017-02-03 gabessdsp

哪些空白你指的是？黑盒子上方？你是否尝试调整边距/填充？ – Carcigenicate

Dupe http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1 – j08691

可能的重复[如何删除inline-block之间的空间元素？]（http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements） – 2017-02-03 17:00:24

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

来源

2017-02-03 16:58:38

ahh哇，谢谢！ – gabessdsp

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

来源

2017-02-03 16:58:45 j08691

Downvoter关心评论？ – j08691

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

速战速决将使用浮动而不是为gear-item：

display: block; 
float: left;

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

来源

2017-02-03 17:01:00

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

回答

相关问题