How to troubleshoot spacing issues

Whitespace & Inline-Block Elements

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 100% resolve this problem is to have no space between elements in the HTML markup (this is what we do with published sites in Webflow). The problem with this solution is that the markup becomes difficult to work with and isn’t very “pretty”. 

If you’re experiencing design inconsistencies between your published site and your exported site there are a few workarounds available 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 to Font Size: 0px and hard-set the inline-block element to the correct font-size.