CSS 虚假边距

Posted 2023-03-30

【中文标题】CSS 虚假边距

【英文标题】：CSS spurious margins

【发布时间】：2015-05-20 11:56:49

【问题描述】：

我可以在这方面提供一些帮助。 这一页; http://fredericacards.co.uk/greetings-cards.php 有一堆带有 h3 标题的产品的 div。该 h3 在 Safari 中具有 20px 的上边距，在 Firefox 中具有 20px 的上边距和下边距，这似乎不是来自我能找到的任何地方。

这是一个旧网站，所以我没有使用样板重置，但我已经完成了通常的边距并为 * 填充 0

我已经调试到使用 Firebug 将页面减少到一个有问题的 div 的程度，但除了将上边距设置为 -20px 之外，我没有做任何事情来将标题向上移动。

我在这里缺少什么？

我通常对内容间距没有问题，所以我想我随身携带的东西也许第二双眼睛可以发现。

【问题讨论】：

“我在这里遗漏了什么？”——关于 SO 的正确问题应该是什么样子。请阅读How to Ask。

我不想变得粗鲁，但你到底想让我问我错过了什么？请参阅下面的答案以了解我错过的内容

@ChrisPink 你可以阅读this guide，CBroe 建议知道如何提出好问题。您可以改进的最重要一点是在问题本身内创建一个minimal, complete, and verifiable example。

当然，一个“好问题”会得到一个快速而中肯的答案。在这方面，这正是发生的事情，我的问题得到了解决。我已阅读指南，但感谢您再次链接到它。无论如何，我已经离开这里了，多亏了 Kurt Serge，我现在可以继续做真正的事情了。

不，一个很好的问题将帮助未来的读者偶然发现它 - 问题中没有任何代码，但只有一个通常不给出的外部链接，因为外部链接然后得到更改以解决问题，因此没有人可以再看到代码的原始状态。 （好吧，由于这是一种特殊情况，因此对未来读者的有用性可能会很低——但这在您提出问题时是无法预见的。）

【参考方案1】：

您的产品 div 中有一些时髦的字符 - 您使用的是什么代码编辑器？看源码HMTL：

【讨论】：

右键页面->“查看页面源代码”

我的来源看起来不像你提供的图片

@BilalMaqsood 如果您使用的是 google chrome 检查元素，您不会直接看到它。然后，您首先需要右键单击并单击“编辑为 html”。然后你会看到红点而不是这些奇怪的方块......

这些是由 Filemaker 引入的，我可以看到它们是如何进入的，但在我的代码编辑器中没有看到它们； Coda 和 Dreamweaver。我将在没有它们的情况下重新处理文件，尽管快速测试似乎表明这不是问题，这是不必要的混淆。

正确。这正是我所缺少的。现在我需要知道如何在 Filemaker 变量中换行，但那是另一天的对话@Kurt Serge：很好，先生！