css - 如何控制正在编辑的 Wordpress 页面内的间距？

Question

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

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

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

我希望带有电话号码的图像(顶部)连接到表单(底部)。我检查了适用于表单的 CSS，没有边距。 HTML 代码或 Wordpress 所见即所得中也没有断行符。

为什么是空白？

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

谢谢!

Answer 1

空白是由于 margin-bottom: 15px; 出现在 div 类 video-sub 内的段落元素中。该段落还具有 20px 的 line-height。

将此添加到您的 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;
}