How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?

Whitespace in Inline-Block List Items Solved

Inline-block list items often exhibit unwanted spaces between them. This issue arises due to the whitespace-dependent nature of inline-block elements and the font's spacing settings.

To resolve this, consider the following measures:

• Block Together: Merge your list items into a single line for optimal spacing.
• Join Tags: Wrap the list item tags together, eliminating the space between each item:

<ul>
    <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Alternatively, you can eliminate the whitespace by setting the font size of the parent element to 0:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

This method resets the font spacing for the parent element and adjusts it separately for the individual list item content.

The above is the detailed content of How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?. For more information, please follow other related articles on the PHP Chinese website!