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

标签 css html

<分区>

我在容器 div 上有一组带有 display: inline-block 的元素,如果内容超过设备宽度,它们应该水平扩展。一切正常,但每个 .item 元素之间有一个奇怪的边距,正如您在此处看到的:http://julienlima.com/

notice the blue line between images

(注意图片之间的蓝线)

<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;
}

没有边距或填充弄乱它,我不知道为什么它会这样而不是 float 。有什么想法吗?

最佳答案

这是由于 HTML 标记中的空白和/或换行造成的。在代码中删除它们,边距也会消失。 “内联”元素以及 display: inline-block 总是一个问题。

关于CSS - 内联 block 元素之间的奇数边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18926977/

相关文章:

css - 用同位素点击展开元素

javascript - CSS3 过渡淡出显示属性

html - 在有 child 条件的情况下实现 Less

jquery - 如何在用户界面的某些页面上禁用复制文本

javascript - AngularJS 在 onclick 事件中的一个应用程序中具有两个 Controller

css - 如何删除来自父级的文本的额外宽度?

c# - 无法在c#中获取Bootstrap所见即所得富文本编辑器的编辑器div的InnerHtml

javascript - 如何在选择框中显示 json 数据?

html - 网页中的 Opentype 字体没有重音

javascript - 使用 jQuery 选择焦点上的文本框在移动浏览器中不起作用