Understanding Internal Gaps of an Element
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.
Changing Gaps Using Padding
Padding is a versatile tool to fine-tune spacing within an individual element.
Steps to Adjust Padding:
Step 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.
Changing Gaps Between Child Elements
When working with rows, grids, or other containers with multiple child elements, adjusting column or grid gaps ensures proper spacing between those elements.
Steps to Adjust Column or Grid Gaps:
Step 1: Select the Parent Container:
Click on the row, grid, or container that holds the child elements to open its Settings panel.
In this case, the row element with 2 columns is selected:
Step 2: Adjust Column or Grid Gaps
Locate the Column Gap options within the Settings sidebar.
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.