DIV 之间的额外空间

Question

我正在使用 Wordpress 制作一个包含两个主要组件的登录页面：

1. 垂直和水平居中的 DIV（用 Jquery 实现）
2. 具有翻转效果的一系列按钮（使用 JqueryUI 实现）

虽然这两个组件似乎都运行良好，但按钮之间有一个额外的空间，我似乎在 HTML 编辑器中找不到，可以看到 here。 “主站点”、“移动”和“捐赠”按钮之间的间距明显大于标题和第一个按钮之间的间距。

在 Chrome 中使用检查元素，每个按钮的 </div> 标记后面的行包含一个 " " ，我认为这可能是造成额外空间的原因，但我在 Wordpress HTML 编辑器中找不到它。我还下载了一个 WP disable wpautop-type 插件，但它并没有删除空间。

最后，当我将 HTML 和关联的 CSS 粘贴到 JSfiddle 时，多余的空间消失了。我假设问题出在 Wordpress 的自动格式设置上。但是，我无法弄清楚添加空间的功能是什么或如何删除它。任何帮助是极大的赞赏！

Answer 1

我最终为有问题的按钮添加了一个负的底部边距，它删除/减少了 DIV 之间的空间，使其正好符合我的需要。话虽这么说，如果添加负底部边距是不好的做法，请随时跳到这篇文章中并阻止我！

ShaunOReilly，非常感谢您的帮助和 jsfiddle - 我一定会记住的。

马卡

Answer 2

按钮之间有一些额外的双引号：

<div id="landing" style="margin-top: -100px; top: 50%; position: absolute; margin-left: -200px; left: 50%; "><div style="font-family: 'serif6_beta_rregular'; font-size: 26pt; color: #ffffff; text-align: center;">Adrienne Adams</div>
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Main Site</div>
    ""
    ​<div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Mobile</div>​
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Donate</div>​
</div>

可能是换行符之类的。

这个看起来不一样：http://jsfiddle.net/webwarrior/tHwmH/3/

当我添加相同的双引号时，我得到相同的效果：http://jsfiddle.net/webwarrior/tHwmH/4/

如果您不想花几天时间来弄清楚模板为什么会这样做，那么将以下 jQuery 添加到 DocumentReady 函数：

jQuery("#landing").parent().append("<div class='temp'><div>");
jQuery(".temp").append(jQuery("#landing div"));
jQuery("#landing").empty();
jQuery("#landing").append(jQuery(".temp div"));
jQuery(".temp").remove();

如下所示：http://jsfiddle.net/webwarrior/tHwmH/18/