CSS - 内联块元素之间的奇数边距

Question

我在容器div上有一组带有display: inline-block的元素，如果内容超出设备宽度，则应该水平扩展。这一切都很好，但每个.item元素之间有一个奇怪的边距，你可以在这里看到：http://julienlima.com/

（注意图像之间的蓝线）

<span class="fix item">
<img src="image.jpg" data-ratio="1.33" data-width="800" data-height="600" />
<div class="fix details">
    <div class="fix row"><a href="#" class="title">title</a></div>
    <div class="fix row"><div class="date">date</div></div>
    <div class="fix row"><a href="#" class="view">View Post</a></div>
</div>

#gallery {
    clear: both;
    width: auto;
    white-space: nowrap;
}

#gallery .item {
    display: inline-block;
    *display: inline;
    width: auto;
    min-width: 100px;
    white-space: nowrap;
    border-right: 1px #CCC dotted;
    border-bottom: none;
    padding: 0 25px;
}

#gallery .item:first-child {
    margin-left: 25px;
    border-left: 1px #CCC dotted;
}

没有边缘或填充物弄乱它，我不知道为什么它表现得像这样而不是浮动。有什么想法吗？

Answer 1

这是由于HTML标记中的空格和/或换行符造成的。在代码中删除它们，边距也将消失。它始终是“内联”元素和display: inline-block的问题。

Answer 2

尤达

由于.item元素的显示类型，会发生这种情况。当您设置display：inline-block时，它不会在不留空间的情况下堆叠元素。就像你设置float：left时，元素堆叠在一起而没有空格。

修复方法是将font-size：0设置为父元素。在你的情况下#gallery应该有font-size：0，你很高兴。

Answer 3

display: inline-block表示元素既可以作为内联（如单词），也可以作为块（如div或图像）处理。这意味着它们将具有行高，字间距和自动换行，并且会受到text-align的影响，就像内联元素一样。尝试设置：

word-spacing: 0;

之后

display: inline-block;

确认是否可以解决此问题。