如何控制正在编辑的 Wordpress 页面中的间距？答案

【问题标题】：How do I control spacing within a Wordpress page that I am editing?如何控制正在编辑的 Wordpress 页面中的间距？
【发布时间】：2013-01-24 11:50:32
【问题描述】：

非常简单，如何控制 Wordpress 页面上对象之间的间距？

具体来说，我正在尝试删除下图中绿色框之间的空白：

截图：http://goo.gl/doZve 主页：http://bellairecabinets.com/new/

我希望带有电话号码的图像（顶部）连接到表单（底部）。我检查了适用于表单的 CSS 并且没有边距。 HTML 代码或 Wordpress WYSIWYG 中也没有分隔符。

为什么是空白？

此外，当输入错误信息并单击提交时，您会在表单上方收到警告。这会将整个布局向下移动。我怎样才能解决这个问题？有没有办法简单地将警报更改为显示在弹出框中而不是页面上？

谢谢！

【问题讨论】：

标签： css wordpress spacing

【解决方案1】：

空白是由于margin-bottom: 15px; 存在于div 内的段落元素中，类为video-sub。该段落还有一个line-height 和20px。

将此添加到您的 CSS：

.video-sub p
{
    line-height: 0;
    margin-bottom: 0;
}

要将绿色框与幻灯片对齐，请执行以下操作：

.video-sub
{
    padding-top: 0;
}

对于 CSS 弹出窗口，您可以这样做：

.form-error
{
    background-color: white;
    left: 0;
    margin: 0 auto;
    padding: 10px;
    position: fixed;
    right: 0;
    top: 30px;
    width: 980px;
    z-index: 1;
}

我认为您可以将上面的代码替换为可以处理错误并形成已发送消息的代码：

#contact-form-4758
{
     background-color: white;
     left: 0;
     margin: 0 auto;
     padding: 10px;
     position: fixed;
     right: 0;
     top: 30px;
     width: 980px;
     z-index: 1;
}

【讨论】：

谢谢，效果很好！我唯一的问题是绿色框与左侧的幻灯片不对齐。有什么快速解决方法吗？谢谢！
哇。你太棒了！如此简单......但我正在努力解决这一切。最后一件事。制作它是否简单，以便在弹出框中弹出错误？尝试在不输入任何内容的情况下单击提交，您会明白我的意思。它破坏了布局......
谢谢。很抱歉打扰您，但是您是否看到我需要为成功消息编辑哪个类？我一直在环顾四周，无法确定将哪个应用于您之前发送给我的相同代码。
不完全是，移动了整个表单。只需重新加载页面并检查它做了什么......
您仍然应用了.form-error 类。删除它并将该代码替换为#contact-form-4758。看到我在答案中写了上面的替换。 :)

【解决方案2】：

WordPress 内容中的额外间距通常是由 WordPress 自动段落代码引起的。这是一个名为 wp_autop() 的函数，其目的是在输入中出现换行的地方添加 HTML 中断段落。有一些方法可以将其关闭或仅在需要时应用。搜索 WordPress 论坛或 autop。

【讨论】：