How to solve the display:inline-block generated gap in CSS layout

in doing H5 horizontal sliding card when used to Display:inline-block, but found in the same level between the elements actually produced a gap, which is obviously not the effect I want, so I replaced the left float, so the gap problem is solved, But need to set the width of the parent element to achieve horizontal scrolling, which increases the amount of code, because the number of cards is not fixed, need to set the width of the parent element in real-time, it is necessary to use JS, so the amount of code increases, is not the best choice. It seems that the best solution is to use the Display:inline-block, so the problem of the gap appears. The code is as follows:

<! DOCTYPE Html>
The effect is as follows:


This gap is clearly present, it is said that this performance is in line with the norms of the performance, is a newline caused by the white space character. But the effect is obviously not what we want, the gap we want is the margin we set for our actual needs. So how do you get rid of the gap that arises? There are three ways:

method One: the elements do not wrap between the lines, the code is as follows:

<p class= "box" >  <span>111</span><span>111</span><span>111</span> <span>111</span></p>
The effect is as follows:


method Two: set the font-size:0 to its parent element, and set the actual font size for itself. The downside is that some browsers have the smallest font settings, like Chrome and opera, but now Chrome doesn't seem to have this set up, the code is as follows:

Css:

. Box{overflow-x:auto;background: #fff; white-space:nowrap;font-size:0;}. Box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background: #f00; color: #fff; font-size:14px;}
Html:

<p class= "box" >    <span>111</span>    <span>111</span>    <span>111< /SPAN>    <span>111</span></p>
The effect is as follows:


method Three: negative margin method, it should be noted that this gap is related to the size of the font, so the gap is not a definite value.

The above three methods, the first two is a better solution, the third method is not recommended to use. There are other solutions on the Internet, but I think the first two are better.