Gap

In this article, we're going to explain to you the Gap Element and its settings.

  1. Gap Setup
  2. Customize
  3. Demo
  4. Summary

In web design whitespaces, or negative spaces, are important. For one, they increase the legibility of a website and also act as separators between elements or groups of elements. Put simply, elements that are closer to each other are perceived as related (or in the same group) compared to those that are far from each other.

In Cornerstone and the Pro Builders (Content, Header and Footer Builders), you can easily bring separation between elements, rows, columns and sections using either padding and margins. However, there's also another way to bring separation - and that is by using the Gap Element.

When using Cornerstone or Pro's Content Builder, simply search "Gap" and drag the Gap Element into the content pane.

Cornerstone / Content Builder Gap Element

In either Header or Footer Builder in Pro, just go to Elements then search for "Gap" then drag the Gap Element into the canvas.

Header / Footer Builder Gap Element

The Gap Element is one of the simplest element in X and Pro. It only has two tabs, Setup and Customize, and doesn't have a Design tab.

Let's discuss the Setup tab!

Gap Setup

When you "Inspect" a Gap element, you'll see only three settings/fields: Direction, Base Font and Gap Size.

Gap Setup

Direction

"Vertical" is the default value. If this is the selected option, the Gap Element will divide elements above it and below it. In most cases, especially when using Cornerstone / Content Builder, this is what you want. I think it's rare that you'd need to use "Horizontal" on Cornerstone / Content Builder but this option is still available to you.

Gap Vertical Setup Example

The practical use of the "Horizontal" option is usually in the Header and Footer Builders where elements are usually beside each other (e.g. Logo is beside the navigation). So it makes sense that if you'd like to add a distance between the two elements that are side-by-side, you'll set the Gap's Direction to horizontal.

Gap Horizontal Setup Example

Base Font Size

It's best to leave the default value as it is and just adjust the size of the gap using the Gap Size setting discussed below.

Gap Size

If the Direction of the Gap is "Vertical," the value you put in the Gap Size will be the height of the Gap. The larger the value, the greater the distance between the element before the Gap and after it.

If the value for Direction is "Horizontal," the Gap Size will be the width of the Gap.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Gap Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Gap Element click here.

Summary

Now you know how to use the Gap Element to easily add separation between elements.

See something inaccurate? Let us know