差距

在网页设计中，空白或负空间非常重要。首先，它们增加了网站的易读性，也充当元素或元素组之间的分隔符。简单地说，与那些彼此远离的元素相比，彼此更接近的元素被认为是相关的(或在同一组中)。

在Cornerstone中，您可以使用填充和边距轻松实现元素、行、列和节之间的分离。然而，还有另一种方法可以带来分离——那就是使用元素的差距．

使用Cornerstone或Pro的内容生成器时，只需搜索“Gap”并将Gap元素拖到内容窗格中。

在专业版页眉或页脚构建器中，只需转到元素然后搜索“Gap”，然后将Gap元素拖到画布中。

的元素的差距是X和Pro中最简单的元素之一。它只有两个选项卡，设置和自定义，并且没有设计选项卡。

让我们讨论一下设置选项卡!

差距设置

当你“检查”一个间隙元素时，你只会看到三个设置/字段:方向，基本字体和间隙大小。

方向

“Vertical”为默认值。如果这是选中的选项，那么间隙元素将划分它上面和下面的元素。在大多数情况下，特别是在使用基石/内容生成器时，这就是你想要的。我认为你很少需要在基石/内容构建器上使用“水平”，但这个选项仍然适用于你。

“水平”选项的实际使用通常是在页眉和页脚构建器中，其中元素通常在彼此旁边(例如，Logo在导航旁边)。因此，如果你想在两个元素之间添加一个并排的距离，你可以将Gap的方向设置为水平。

基本字体大小

最好保持默认值不变，只需使用间隙尺寸下面讨论设置。

间隙尺寸

如果方向的差距是“垂直的”，你在差距大小的值将是高度盖普的。值越大，元素之间的距离就越大之前Gap和后它。

如果“方向”的值为“水平”，则间隙大小将为宽度盖普的。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看间隙元素的现场演示，请单击在这里．

总结

现在您已经知道如何使用间隙元素来轻松地在元素之间添加分隔。