✓ In this article, we'll explain the different spacing management options available in Kehio Editor.
Margin definition
Margin is a CSS term for the outer space around an element (section, block or content). It's not a visible part of the element itself, but rather an "empty" space that separates the element from another element. By modifying the margin, you can control the spacing between elements on your page, which helps to visually structure your site without altering the size of the elements.
Padding definition
Padding is a CSS property that defines the space between an element's content and its borders. Unlike margin, which adds space to the outside of the element's borders, padding applies to the inside, increasing the space around the element's internal content without affecting its relative position to other elements.
Gap definition
Gap is a CSS property used to define the space between elements in flexbox or grid layouts. The term is often associated with the management of gaps in CSS grids between elements (row-gap and column-gap). Gaps adds uniform space between elements, making it easier to create coherent, well-structured designs without adjusting the margins of each element individually.
ℹ️ Note: If you're not yet comfortable with spacing management, or if you'd rather avoid complex settings, there's a practical solution for you. You can directly import pre-configured, fully optimized designs from our demo stores.
Spacing management in Kehio Editor
In Kehio Editor, spacing management is essential to create a clear and visually pleasing interface. You can manage spacing at two distinct levels, Content and Block, each with its own importance and need for coherence to ensure an optimal user experience. With Kehio Editor, you can manage spacing on any resolution, thanks to media query management and without the need to add a single line of code. This allows you to efficiently adapt your content regardless of your customer's browsing device.
Margin in Kehio Editor
Managing content margin :
When you create content within a block, the margin determines the external space around that content, essential for a smooth layout. Kehio Editor offers advanced tools for adjusting these margins through media queries and live preview. This means you can adapt your content's margins for all screen resolutions, guaranteeing optimization on all devices.
To adjust the content margin :
1 - Click on the content you need to edit
2- In the right-hand control panel, go to margin
3- Set your margin for each resolution you want to modify
Managing block margin :
Similarly, adjusting the margin of an entire block allows you to coordinate the spacing between the various contents of your creation. This feature ensures that the entire block is visually harmonious, whatever the screen resolution.
To adjust block margin :
1 - Click on the Block you need to edit
2- In the right-hand control panel, go to margin
3- Set your Margin for each resolution you want to modify
Managing creation’s General Margin
As with Content and Blocks, you can also manage the margin (outer spacing) of the entire creation on any resolution, so that your creation fits seamlessly with the other sections of your theme.
Padding in Kehio Editor
Managing content padding :
Padding, or internal spacing, allows you to add space within the boundaries of a content element (Item(s)), which affects the position of its internal content but not its external position in relation to other elements such as a colored background. As with margins, we've integrated advanced options to optimize the padding of your content on all resolutions with media queries.
To adjust content padding :
Select the content you need to edit.
In the right-hand panel, go to Padding.
Configure padding for each desired resolution.
Managing block padding :
Similarly to content, block padding can be adjusted to harmonize the block's internal spaces, a useful feature especially when a colored background is added to the block.
To adjust block padding :
Click on the block you need to edit.
In the right-hand panel, go to Padding.
Set the padding for each desired resolution.
Managing creation’s General padding:
As with Content and Blocks, you can also manage the padding (inner spacing) of the entire design, for all resolutions, in order to optimize your creation with the other sections of your theme.
To adjust the overall padding of the design :
1 - Go to Kehio Editor Settings
2- Click on General
3- adjust padding for each screen resolution.
Gap in Kehio Editor
Managing content gap :
Gap, also known as grid or element spacing, is used to create space between items within the same content. This setting is particularly effective for quickly and precisely adjusting the spacing between different content components without affecting their overall alignment. Using the gap allows more direct spacing management and is often more practical than using margins, especially in complex grids or flexbox layouts.
To adjust content gap :
Select the content for which you need to adjust the gaps.
Go to Gap in the right-hand control panel.
Configure gap values for each resolution, adjusting the space between items as required.
Managing Block Gap :
Gaps in the context of an entire block allows you to define the spacing between multiple contents within the same block. This is useful for maintaining visual consistency between different sections while allowing maximum flexibility in the presentation of elements.
To adjust block gap :
Click on the block for which you want to adjust the gap.
In the right-hand control panel, find and set the options under Gap.
Adjust the gap for each resolution to ensure the right alignment for each type of device.
ℹ️ Important note: Gaps are closely linked to grid systems. If the value specified for the gap is too large, it may cause the content or block to spread outside the intended area, which could compromise the layout of your site. Be sure to check the rendering on different resolutions and adjust the gap if necessary to ensure a clear and crisp presentation on all devices.
If you need help fine-tuning your spacing with Kehio Editor, don't hesitate to contact us. Our team is available to assist you by email or chat.