为什么我的内嵌块列表项目有不需要的边距？

内联块列表项中不需要的边距

问题：
您的内联块列表项莫名其妙地在周围显示出边距它们，尽管在 CSS 中将 margin 设置为 0

原因：
问题是由使用 display: inline-block; 引起的。对于列表项。内联块元素对空格敏感，并在每个元素的右侧引入 4px 边距。

解决方案 1：float: left;
要消除边距，请更改显示浮动属性：left；。这会删除内联块引入的间距。

解决方案 2：防止空格
或者，您可以通过删除列表之间的所有空格来防止空格影响内联块元素item 标签，如下图：

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

另一种解决方案：块 End 和 Begin标签
您还可以将结束标签和开始标签一起屏蔽，强制将列表项视为一行：

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

以上是为什么我的内嵌块列表项目有不需要的边距？的详细内容。更多信息请关注PHP中文网其他相关文章！