When setting elements as inline elements, there are gaps between elements

The problem

When using display to set the elements to inline elements (inline, inline-block, etc.), and setting margin to all 0 and padding to all 0, I noticed that there was still a gap between the elements. ????? As shown in the figure below:

why

The gap is caused by whitespace characters left between element tags.

The solution

1. The first eliminates whitespace between element tags and joins the tags together.

Step 1: Set font-size to 0 on the parent element of each element in the row; < font size:14px; font-size:14px;

As shown in the figure below:

At this point, the gap between the elements in the line disappears!