Eliminating Space Between Horizontal Elements

I'm trying to generate a web page with a diagram that shows how a word is broken down into bit fields. The way I want it to appear is for each field to appear as a row of boxes (o

Solution 1:

you could have your HTML cleaner but the problem is the display:inline-block create gaps, so you need to remove unnecessary spaces between your HTML tags or reset font-size to 0.

check it here :

Fighting the Space Between Inline Block Elements

There is more solutions on the link above.

Plus you can use display:block; float:left instead.

Solution 2:

combining elements like so will remove the space

<span style="display:inline-block;">Hello</span><span style="display:inline-block;">World</span>

it's a hassle I know but it works somehow. you want to put those styles in an external style sheet, not inline like I have them here.