显示的神秘负边距：inline-block 元素答案

【问题标题】：Mystery negative margin on display:inline-block elements显示的神秘负边距：inline-block 元素
【发布时间】：2012-05-28 22:36:57
【问题描述】：

我真的很困惑为什么会发生这种情况。 http://syndex.me 上的帖子有 2px 的边距。当页面最初加载时，这是遵守的。当第二批帖子加载时（14 个帖子开始加载），您会看到出于某种奇怪的原因，右侧的帖子实际上比应有的短 2px。

更奇怪的是，检查帖子显示它们实际上设置了margin:2px 更奇怪的是，这只发生在左边距或右边距，而不是顶部和底部（？！）

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

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

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

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

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

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

【问题讨论】：

FWIW，我有 Chrome/Linux，如果我正确理解您对“帖子”的含义，我会看到帖子之间的差距。或者你的意思是总共应该有 4px （从他们相遇的每个元素中取 2 个像素）？ stommepoes.nl/tempmargins.png这里有很多div；您是否通过简化的单个 div 或图像以及延迟加载的测试用例看到了这一点？
Dag Stommepoes，是的，所有边距总共 4px。延迟加载后，所有帖子在查看检查器时仍然有这个，但总共有 2px 而不是 4px 的帖子彼此并排，但不是高于或低于。这对我来说没有意义。
我对 css 进行了深入研究，真的，这很奇怪。然而，正如 stommepoes 所说，CSS/HTML 结构本身非常复杂。您应该尝试尽可能简化，并继续简化直到边距行为符合您的要求，然后逐步恢复元素以帮助您找到发生这种情况的位置。
总之，它是非常嵌套的，但是将其剥离，尤其是作为一个 tumblr 皮肤将是一项艰巨的任务。我实际上只是对为什么会发生这种情况感兴趣。也许我不了解有关内联块行为之类的东西。但无论如何，实际的“错误”发生在所有嵌套 div 的超级容器上，理论上它不会受到它的孩子的影响，对吧？太奇怪了。它也发生在所有帖子上，无论如何每个帖子都有不同的巢结构。
修复其中的一些137 HTML validation errors 不会有什么坏处。大多数情况下，它确实有助于解决许多奇怪的问题。

标签： html css

【解决方案1】：

页面首次加载时，HTML 中每个<div class="post"> 之间都有空格。每个空白块都被渲染为一个空格字符（通常为 4px 宽）。 <div class="post_margin_adjustment"> 用它的margin-right: -4px 抵消了这一点，所以初始帖子之间的差距是 8px：

4px（从左帖到右边距） + 4px（空格字符） - 4px（从左 post_margin_adjustment 开始的负边距） + 4px（从右帖到左边距） = 8像素

当无限滚动插件加载下一页时，它会抓取新的div.post 元素并将它们插入到页面中，没有空格。所以新帖之间的差距是4px：

4px（从左帖到右边距） - 4px（从左 post_margin_adjustment 开始的负边距） + 4px（从右帖到左边距） = 4像素

这就是为什么新帖子之间的差距比初始帖子之间的差距更窄的原因。

要解决这个问题，我会：

删除初始帖子之间的空格：
```
$('div.post').detach().appendTo('#posts');
```
在页面准备/加载时，模拟无限滚动插件正在执行的操作。
从.post_margin_adjustment 中删除margin-right: -4px;。

初始帖子和新帖子之间的差距现在都应该是 8 像素宽。

【讨论】：

但是为什么会出现这个边距？我之前在一篇博文中读到过这个，我使用相同的 -4pa 边距黑客。但是造成这种情况的根本原因是什么？？
@SurendraVikramSingh 你指的是哪个“这个边距”？您是指元素/帖子之间的空格字符吗？
我指的是margin，因为使用了inline-block。
@SurendraVikramSingh 设置display: inline-block 不会创建任何（额外的）边距，但在呈现元素之前/之后的空白就像元素是内联的一样。正如<span>a</span>[space][space][space]<span>b</span> 被渲染为a[space]b 一样，内联块元素也会发生同样的事情。

【解决方案2】：

首先，此 SO 答案是对 Zuul 在此页面上提供的 SO 答案的补充。我无法编辑他的答案，或者 PEER REVIEW 过程无论出于何种原因都不起作用。

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

参考：“不可能根据检查员计算的样式在说一件事，但在视觉上它在做另一件事？”

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

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

第二张图片是使用 Firefox 3D 查看器 拍摄的特写。在这里，您可以通过显示的底部蓝色看到原始容器正确放置在页面上。这表明onload 进程遵守了与右侧图像的正确 CSS 距离。虽然右上角的文字模糊不清，但margin-right 使用-4px 有一个复选标记：

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

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

新功能：您可以右键单击每张图片并选择view image 以查看大图。

【讨论】：

【解决方案3】：

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

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

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

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

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

注意：

你说的是margin:2px，但我在当前的css上看到的是margin:4px;，所以，如果修复了否定margin的问题，帖子之间的总数是8px。

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

最后一件事也弄乱了边距声明是：

.index .post {                                          /* syndex.css (line 1) */
  line-height: 0;
}

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

禁用此功能可修复顶部/底部间距，使其能够通过 margin:4px 正确呈现。

【讨论】：

我相信要编辑问题和答案，您需要 2000 声望。但是，如果无法编辑答案，请随时将它们留在 cmets 上。
我无法通过 edit 为您的答案做出贡献，因为它在同行评审过程中未被接受。相反，我将创建一个可以补充您的答案。

【解决方案4】：

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

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

解决方案二：避免依赖 css 中的空格，并使用 alternative means 从 inline-block 元素中删除空格。

IMO 的大方向是#2 更可取。

【讨论】：