Several solutions to clear HTML whitespace between inline elements

Inline blocks (inline-block) are very useful especially when you want to control the margin,padding of these inline elements without ' block ' and ' float ', whitespace between inline elements is sometimes displayed on the screen that's pretty annoying.

 

So far I remember that Young is the IE6 on the development of those hard days, especially want IE browser to use the Inline-block display mode.
Inline blocks (inline-block) are useful, especially when you want to control the margin,padding of these inline elements without ' block ' and ' float '.
The problem is, the whitespace between elements in the HTML source code is sometimes displayed on the screen that's pretty annoying.
Of course, there are some tricks (methods) that can be used to clear them: such as outright deletion of whitespace, or other methods:

solution 1:font-size:0;
the best approach is to set the font-size:0 on the outer element and specify the font size on the inner element.

Copy Code code as follows:


Ul.inline-block-list {/* such as UL or OL element * *


font-size:0;


}


ul.inline-block-list Li {


font-size:14px; /* Set the specific font size * *


}

In order to counteract the font properties of the outer element, the inner element must specify the Font-size attribute, which is, of course, simple.
If the code is a complex nesting relationship, you may not be able to calculate or specify these font attributes, but in most cases this is the effect you want!

Solution 2:html Comments
This method is relatively slag, but the effect is good. Use HTML annotations to mark gaps between replacement elements:

Copy Code code as follows:


<ul>


<li>item content</li><!--


--><li>item content</li><!--


--><li>item content</li>


</ul>

A word to describe: slag. If you use 2 words to describe, that is "slag", in 3 words to describe, "resolved."

Solution 3: Specify a negative value for the margin property
similar to Scenario 2, this is a bit of a slag. You can use the margin property of the inline element to offset whitespace:

Copy Code code as follows:


ul.inline-block-list Li {


margin-left: -4px;


}

This is the worst solution because you have to calculate it according to the circumstances and sometimes it's not right. You should try to avoid doing so.

None of these scenarios are ideal, but if you don't, your HTML code structure can be very confusing and a standard spam code.
Because inline elements are very useful, this is not a carefully avoided minefield, as a developer, it is also important to learn to deal with this kind of white space problem.