A common problem when using inline-block elements is that whitespace in HTML becomes visual space in the site design (similar to having space between words).
The only way to resolve this problem is to ensure that there is no space between elements in the HTML markup. Please note that this resolution may complicate the markup and make it more difficult to work with.
If you’re experiencing design inconsistencies between your published site and your exported site, there are a few workarounds that can help:
- Export minified code: from the export modal in the Designer, use the keyboard shortcut [ctrl+o] to activate advanced exporting options.
- Publish minified code: from the Hosting tab in your Site Settings, scroll down to the Publishing Options section and uncheck Beautify HTML and
- Use floats instead: try floating the elements instead. If you need to center them, wrap them in a Div Block that is set to Display: Inline Block.
- Add negative margin: add a small amount of negative left/right margin to any inline-block elements that cause trouble to cancel out the added space.
- Set font size to zero: set the parent element's font size: 0px and hard-set the inline-block element to the correct font-size.
