如何删除divi行之间的填充和页边距?

时间:2018-05-30 作者:Lynob

我有两个divi行,每行包含3列,每列包含Blurb module item.

我想删除这两行的顶部和底部的填充和边距,我想要填充和边距0px,怎么做?我从设计开始设置,你可以在间距部分设置,但仍然有一个空白。

enter image description here

Edit

我为eSparkBiz团队做了所有的事情,你可以看到几乎所有的事情都有边际和填充0px。在这两个部分之间仍然有一些我找不到的东西。向下滚动至CHECK OUT OUR LATEST PROJECTS 有两行,每行有3列,我正在尝试删除中间的空格。

enter image description here

Solved, I posted my answer below

4 个回复
最合适的回答,由SO网友:bravokeyl 整理而成

查看演示,我看到你把paddingmargin 作为零,这很好。您看到空白的原因是,有些内容是白色的,您将其混淆为空白(填充或边距)。

enter image description here

SO网友:eSparkBiz Team

Step 1: 单击设置选项

enter image description here

Step 2: 将列间隔设置为0,如果不需要填充和边距,请确保启用“自定义排水宽度”选项。

enter image description here

Alternative Solution for Remove Spacing

您还可以根据下面屏幕截图中的标记,使用间距选项设置自定义边距。

enter image description here

我希望这个建议对你有帮助。

SO网友:GingerHippo

当行和列之间的边距和填充发生冲突时,我们通常会看到这种情况。解决此问题的另一种方法是创建负边距。如果您选择使用负边距,请知道Divi将从右到左重叠图像,选择右侧内容作为主要内容。

此外,请确保分别自定义桌面、平板电脑和移动设备,并且横向平板电脑的断点位于桌面边距和填充参数下。我在旁边放了一台iPad来检查断点冲突,还有我的iPhone for mobile等等,因为你在visual builder中看到的移动或平板电脑视图并不总是准确的。

希望这有帮助。我们在主页的中间使用了负边距,因为我们无法在图像之间消除2倍的空白。亲自查看GingerHippo

enter image description hereenter image description here

SO网友:Lynob

我在主blurb元素上创建了一个名为.projects-gallery, 然后在Divi主题选项中,我添加了这个CSS

 .projects-gallery .et_pb_blurb_container { 
     display: none; 
}
 .projects-gallery:hover .et_pb_blurb_container { 
     display: block; 
}
原因是,.et_pb_blurb_container 正在占用空间,您无法隐藏它,因为这样,项目标题将不会显示。使用上面的代码,当有人悬停在特定项目上时,可以隐藏它,然后显示它。您需要一个自定义类,这样就不会弄乱页面的其余部分。

如果您像我一样将它们放在单独的行上,并且希望删除行之间的边距,那么divi将应用line-height:1body, 要删除它

.projects-gallery{
    line-height:0;
}  
结果

enter image description here

并在将鼠标悬停在图像上时保留动画

.projects-gallery:hover{
    line-height:1;
}

结束

相关推荐

当服务器不在我的电脑上时,如何创建和添加js和css文件?

我必须创建并添加一个javascript和css文件,并将其添加到wordpress主题中。问题是服务器位于其他计算机上。所以我不能这么简单地添加js和css文件。我知道如果我导航到mysiteurl,我可以编辑主题。com/主题编辑器。php但我不知道如何将文件添加到主题中。我该怎么办?因为服务器在另一台电脑上,我不知道主题的方向和url我只知道网站的url