How to remove the gap between inline-block?

<body>
    <ul class="box">
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
</body>

.box{
border:1px solid #ccc;
padding-left: 4px;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}

Insert picture description here
When elements are treated as in-line elements, the whitespace between elements (spaces, carriage returns, line feeds, etc.) will be processed by the browser. According to the white-space processing method (default is normal, merging excess whitespace), The carriage return and line feed are converted into a blank character, so there is a gap between the elements. The spacing between these elements will change with the size of the font. When the inline element font-size: 16px, the spacing is 8px.

1. Remove the spaces and carriage returns between tags

<body>
    <ul class="box">
        <li>123
        </li><li>456
        </li><li>789</li>
    </ul>
</body>

<body>
    <ul class="box">
        <li>123</li
        ><li>456</li
        ><li>789</li>
    </ul>
</body>

<body>
    <ul class="box">
        <li>123</li><!-- 
        --><li>456</li><!-- 
        --><li>789</li>
    </ul>
</body>

2. Use negative margins

Disadvantages: the size of the spacing between elements is related to the size of the context font; and the spacing between elements of the same size font is different under different browsers, such as: font-size: 16px, between elements under Chrome The spacing is 8px, and the spacing between elements in Firefox is 4px. Therefore, the negative value of margin-right is different under different browsers, so this method is not universal.

3. Set font-size:0 for the parent element, and the child element uses font-size according to the actual situation

.box{
border:1px solid #ccc;
padding-left: 4px;
font-size: 0;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}

Insert picture description here
Disadvantages: inline-block elements must set the font, otherwise the font in the inline elements will not be displayed