Inline-block Blank Space Explanation And Solution

I searched the solution for space between inline block elements, and I found many solutions (see some of these solution below). My question is not about solutions, it's about expla

Solution 1:

According to Chris Coyier

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

Source: css-tricks.com

Solution 2:

Explanations of the solutions:

1. if you have a font size of 0, the width of every character is also 0, including the space. So the space is still there, it's just 0px wide. Note however, that this solution may not be ideal. When you set font-size:0, some browsers will use the minimum font size (from the user's preferences) , so you may end up with a small space instead of no space.

2. Comments don't render, so if you use comments instead of whitespace, nothing gets rendered. There's also yet another solution: simply don't put anything between the divs in the source; write </div><div> everywhere.

3. Negative letter spacing puts the letters (and therefore also the words) closer together. It won't cause adjacent elements to overlap though.

4. Floating also removes all visible whitespace. It has side-effects though, especially if you don't clear the floats, so use this solution sparingly.