Change the Gap Inside Element

Understanding Internal Gaps

Gaps inside an element are crucial for creating clean, well-structured designs. Here’s a breakdown of the two main types of gaps you may need to adjust:

Padding

Padding defines the space between the content of an element and its edge.

It helps improve readability and gives your design a more polished appearance by ensuring content is not cramped.

Column and Row Gaps

These gaps are specific to parent elements like rows or columns that contain multiple child elements.

They control the spacing between individual child elements within the container, ensuring proper alignment and balance.

Adjusting Gaps Using Padding

Padding is a versatile tool to fine-tune spacing within an individual element.

1. Select the Element: 

Click on the element you want to adjust to open its settings panel.

Step 2: Access Padding Settings:

Go to the Advanced tab in the settings sidebar.

Navigate to the Spacing section, where you’ll find the padding settings.

Step 3: Modify Padding Values:

Set custom values for the top, right, bottom, and left padding fields.

• Top: Space above the content.
• Right: Space to the right of the content.
• Bottom: Space below the content.
• Left: Space to the left of the content.

Use consistent values across all sides for a uniform look, or assign different values to create an asymmetrical or dynamic design.

Adjusting Gaps Between Child Elements in a Row

The space between child elements within a container or a row is called a Column gap. For instance, when you have multiple buttons or images in a row, adjusting the column gap changes the spacing between them.

• Select the Parent Container: 

Click on the row or container that holds the child elements to open its Settings panel.

In this case, the row element with 2 columns is selected:

• Adjust Spacing Between Items in a Row

Step 1: Locate the Column Gap options within the Settings sidebar.

Step 2: Enter precise values to increase or decrease the spacing between child elements.

Preview the changes in real-time to ensure the spacing fits your design.

Adjust Gaps Between Rows

Row gaps define the spacing between rows of elements, such as accordions in a list or stacked sections in a layout.

Step 1: Select the Parent Element:

• Click on the container holding the stacked items (e.g., the accordion element).
• Open the Settings panel in the sidebar.

Step 2: Change the Item Gap:

• Go to the Size section in the settings.
• Adjust the Item Gap slider or input a value to control the space between rows.