How to remove the default spacing between inline-block elements

Written a page a few days ago

div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>

　　<li></li>

　　<li></li>

</ul>

I found that a div with a width of 900px could not accommodate three inline elements li with a width of 300px, so I had to use float:left for layout. Later, when I checked online, I found out that inline-block has a default spacing, and the default spacing is 4px, and inline also has a default spacing. Now let’s take a look at some methods to solve the spacing between inline-block elements and inline elements:

1. You can write the element directly on one line in html or write the closing tag and the second opening tag on one or two lines. Add comments or directly remove the closing tag, but the last one cannot be removed.

2. Set margin-right to a negative value, but consider the context font and text size.

3. First set the font of the child element, and then set the parent element font-size:0px;////In chrome: -webkit-text-size-adjust:none;

4. Set the parent element letter-spacing or Word-spacing is a negative value, so you need to consider the font. If the sub-element has text, you should also pay attention to setting the value of letter-spacing or word-spacing.

5.float:left;