为什么内联块列表项有不需要的边距，如何修复它们？

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

在列表中显示内联块元素时，用户可能会遇到项目周围不需要的边距。尽管明确将边距设置为 0，元素仍然显示间距。

此问题是由于内联块元素的性质而产生的。内联块元素保留空白字符，包括元素之间和周围的空白字符。这会导致每个元素的右侧有 4 像素的边距。

解决方案

要消除不需要的边距，用户有两个选项：

1. 更改显示属性：

   将显示属性从 inline-block 转换为 float: left。此方法将删除与空白相关的边距。

2. 连接元素标签：

   将列表项的结束标签和开始标签阻止在一起。此方法会删除导致边距的空白字符。

示例

考虑以下 HTML 和 CSS：

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

ul {
  padding: 0;
  border: solid 1px #000;
}
li {
  display: inline-block;
  padding: 10px;
  width: 114px;
  border: solid 1px #f00;
  margin: 0;
}

li div {
  background-color: #000;
  width: 114px;
  height: 114px;
  color: #fff;
  font-size: 18px;
}

通过将显示属性更改为float: left，不需要的边距为删除：

li {
  display: float: left;
  ...
}

或者，连接标签会删除空白字符：

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

以上是为什么内联块列表项有不需要的边距，如何修复它们？的详细内容。更多信息请关注PHP中文网其他相关文章！