1. inline element:

If the code of inline elements (span, strong, b, em, i, etc.) is wrapped, there will be an undesirable gap between them. By setting margin:0 or padding:0, this gap still exists, indicating that this gap is not margin or padding.

In order not to eliminate this gap, do we have to write the html code of the inline element in one line? The answer is no. During development, in order to facilitate reading and debugging, we are accustomed to writing the code like this:

    <p>
<span>inline element 1</span>
<span>inline element 2</span>
<span>inline element 3</span>
<span>inline element 4</span>
<span>inline element 5</span>
    </p>

Solution: Set the parent element font-size:0, and then set font-size separately for the child elements to fix the bug.

2. inline-block element:

To display multiple juxtaposed elements in one row, in addition to setting float float:left;float:right, we can also set display:inline-block to convert an inline element or block element into an inline-block element that can set the height and width.

If there are 5 inline-block elements, set their width to 20%. We expect them to be displayed on one line. However, due to the spacing caused by line wrapping of the html code, it cannot be displayed in one line.

Solution: Set font-size:0 for the parent element, and then set font-size separately for the child elements.