Remove whitespace between inline-block elements

Remove whitespace between inline-block elements.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?