如何减少表单嵌入代码中元素之间的边距答案

【问题标题】：How to decrease the margin between elements in a form embed code如何减少表单嵌入代码中元素之间的边距
【发布时间】：2020-11-23 03:50:42
【问题描述】：

我正在尝试减少嵌入代码中元素之间的边距。我正在链接到该网站并附上代码。你会看到我在这里的简短屏幕共享视频中解释我想要做什么。通过使用检查元素并在嵌入代码中找到我可以修改的点，我已经取得了一些进展。但现在我似乎碰壁了，我所做的任何改变都没有起到作用。非常感谢大家的帮助！这是下面的视频和嵌入代码文件。堆栈溢出将代码限制为 30,000 个字符，因此您将在下面找到指向完整文件的链接。这也是我正在处理的登录页面的链接。 http://unbouncepages.com/rvp-engagement-campaign-amp/

这也是我正在查看的代码的图像。

观看此视频：https://share.vidyard.com/watch/uQM5o7rjiqUmCATqGbfmdp?

https://www.dropbox.com/s/s69zrbgrmg87n9q/Modified%20Lead%20Form%20Code?dl=0

再次感谢！

-内森

【问题讨论】：

标签： html css forms embed margin

【解决方案1】：

我找到你了。

您正在查看的边距位于 li 元素内的 label 元素上。用自定义样式覆盖它。

我在开发者工具中添加了这个来测试它，但是你应该将它添加到你的代码中，然后重新加载并测试。

<style>
    .my-custom-style{
          margin: 0 !important;
     }
</style>

您将需要 !important 标志来覆盖其他 !important 标志。将其直接放在标签元素上方，如屏幕截图所示。然后在标签元素上，确保添加类，使其看起来像这样：

<label class="custom-form-label sort-element my-custom-style" ...></label>

（为了简洁起见，... 只是为了跳过其他所有内容。不要粘贴）。

只需确保将它作为最后一个类添加到要覆盖边距的两个元素中。

另外，另一个提示，如果你真的需要，如果你想把事情压得更紧，你可以尝试添加负边距。

 <style>
        .my-custom-style{
              margin-top: -5px !important;
              margin-bottom: -5px !important;
         }
 </style>

最后一个想法是您似乎在使用 AMP，因此添加这样的自定义样式可能无法正确验证。有可能您必须将自定义样式添加到标题中的样式中，其他 css 所在的位置。

【讨论】：

嘿伙计！非常感谢您在这里的帮助！我看到你在那里的开发人员工具中是如何做到的，但是我将它放在我在崇高文本中的实际嵌入代码中的哪里？你会在上面看到我的代码截图。