显示的神秘负边距：内联块元素

Question

我真的很想知道为什么会这样。 http://syndex.me上的帖子的边距为2px。当页面最初加载时，这是坚持的。当第二批帖子加载时（14个帖子下载）你会看到由于一些奇怪的原因，右边的帖子实际上比它们应该短2px。

Weirder仍在检查帖子，表明他们实际上设置了margin:2px 甚至更奇怪，这只发生在左边缘或右边缘，而不是顶部和底部（？！）

做了前端很长一段时间后，我非常有信心这是一个奇怪的案例。

我在firefox，safari和chrome上遇到了这个渲染问题。

如果我使用检查员滚动帖子，我可以看到每个帖子确实有2px的保证金，只是第二个帖子（右边）的边距开始，好像它旁边的帖子为零保证金，但它也确实有一个。

好像这些帖子忽略了他们的邻居左右边缘？

有一件事，帖子正在使用display:inline-block。我不明白的是：为什么这种行为只会在延迟加载后启动？我知道内联元素的自然空间为2到4像素，但这是忽略 2px，看起来很奇怪。

我不知道从哪里开始看这个，任何帮助将不胜感激。

Answer 1

首次加载页面时，每个<div class="post">之间的HTML中都有空格。每个空白块都呈现为一个空格字符（通常为4px宽）。 <div class="post_margin_adjustment">使用margin-right: -4px来抵消此问题，因此初始帖子之间的差距为8px：

  4px (margin-right from the left post)  
+ 4px (space character)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 8px

当Infinite Scroll插件加载下一页时，它会抓取新的div.post元素并将其插入到页面中，不带空格。所以新帖子之间的差距是4px：

  4px (margin-right from the left post)  
- 4px (negative margin-right from left post_margin_adjustment)  
+ 4px (margin-left from the right post)  
= 4px

这就是为什么新职位之间的差距比初始职位之间的差距要窄。

---

要解决这个问题，我会：

1. 删除初始帖子之间的空格：

   $('div.post').detach().appendTo('#posts');
   

   on ready ready / load，它模拟了Infinite Scroll插件的功能。

2. 从margin-right: -4px;移除.post_margin_adjustment。

初始和新职位之间的差距现在应该都是8px宽。

Answer 2

首先，此SO答案是本页Zuul提供的SO答案的补充。我无法编辑他的答案，或者PEER REVIEW过程因任何原因无效。

已为SO问题提供了可信和/或官方来源。

参考：“根据检查员的说法，计算出的风格不是说一件事，而是视觉上它正在做另一件事？”

在这种情况下， Firefox 内置了 3D Viewer for CSS 。它显示了正确加载图片但margin-right正在创建的显示信息问题。让我通过拍摄的金盔照片图像来说明这一点。

第一张图片通过虚线在自己的容器中显示已加载的图片。但请注意，图像本身延伸到右侧的虚线外：

第二张图片是使用 Firefox 3D Viewer 的特写镜头。在这里，您可以看到原始容器通过显示的底部蓝色正确放置在页面上。这表明onload进程已经尊重了右侧图像的正确CSS距离。虽然右上方的文字模糊不清，但margin-right使用-4px时仍有选中标记：

最终的照片中删除了margin-right的复选标记。请注意，照片现在正确显示：

使用 3D Viewer for CSS 时，可以使用Firefox复制上述内容。

新：您可以右键单击每个图片，然后选择view image以查看更大的版本。

Answer 3

如果我的问题正确，通过使用Firebug分析FF12.0的页面，我看到：

.post_margin_adjustment {
    margin-right: -4px;
}

这就是将左侧的帖子拉到右侧，从而导致布局对您不尊重：

.index .post {                                         /* syndex.me (line 469) */
  margin: 4px;
}

消除负边距似乎解决了这个问题。

---

注意：

您正在谈论的是margin:2px，但我在当前的css上看到的是margin:4px;，因此，如果修正了问题{{1}，帖子之间的总数为8px }}

刚刚使用了“web developer 1.1.9”中的“标尺”，当禁用了margin时，它会给我8px！

---

最后一件事也搞乱了保证金声明：

margin

此声明导致图像被拉起，从而减少了顶部/底部帖子之间的空间。

禁用此选项会修复顶部/底部间距，允许通过.index .post { /* syndex.css (line 1) */ line-height: 0; } 正确显示它。

Answer 4

您的AJAX检索内容缺少样式表似乎依赖的空白。证明：预加载一些动态帖子，检查页面，编辑为HTML body元素。你会看到static posts have enough whitespace between them（可能过分）和dynamic ones are stuck together。

解决方案一：在附加动态帖子的脚本中添加一些空格。

解决方案二：避免依赖css中的空格并使用alternative means从内联块元素中删除空格。

IMO＃2的大致方向是可取的。