Eliminate gaps between inline elements

An issue that often arises when using inline-block elements is the presence of whitespace in HTML that translates into visible gaps in the layout (similar to word spacing).

The solution lies in removing any separation between elements within the HTML markup. It should be noted that this corrective measure might complicate the markup and pose challenges during editing.

If you encounter design inconsistencies between your live site and exported version, there are some techniques you can try:

• Export minified code: within the Designer’s export modal, utilize the keyboard shortcut [ctrl+o] to access advanced export settings.
• Publish minified code: in the Site Settings under the Hosting tab, navigate to the Publishing Options section and deselect Beautify HTML.
• Utilize floats: consider using the float property instead. For centering elements, enclose them in a Div Block with Display: Inline Block.
• Apply negative margin: counteract any extra space caused by inline-block elements by adding a slight negative left/right margin.
• Adjust font size to zero: set the parent element’s font size to 0px and explicitly define the inline-block element’s font size.