Why Do My Inline-Block List Items Have Unwanted Margins?

Unwanted Margin in Inline-Block List Items

Problem:
You have inline-block list items that inexplicably exhibit a margin around them, despite setting margin to 0 in your CSS rules.

Cause:
The issue arises from using display: inline-block; for the list items. Inline-block elements are sensitive to whitespace and introduce a 4px margin to the right of each element.

Solution 1: float: left;
To eliminate the margin, change the display property to float: left;. This removes the spacing introduced by inline-block.

Solution 2: Prevent Whitespace
Alternatively, you can prevent whitespace from affecting the inline-block elements by removing all spaces between the list item tags, as shown below:

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

Another Solution: Block End and Begin Tags
You can also block the end and begin tags together, forcing the list items to be treated as one continuous line:

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

The above is the detailed content of Why Do My Inline-Block List Items Have Unwanted Margins?. For more information, please follow other related articles on the PHP Chinese website!