为什么我的内联块列表项目即使具有'边距：0”也有不需要的边距？

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

问题

我遇到了一个问题，列表项设置为显示：内联-块周围有不需要的边距，即使边距的 CSS 规则设置为0.

HTML:

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

CSS:

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;
}

解决方案

这个问题是由display: inline-block属性引起的。这里有两个解决方案：

1. 将 display: inline-block 更改为 float: left:

   • CSS:

     li {
       float: left;
     }

2. 删除列表之间的空格items:

   • 删除

   • 之间的换行符标签并将结束标签和开始标签放在一起：

     • HTML:

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

注意：

inline-block 渲染 4px 边距每个元素的右侧。为了避免这种情况，建议使用浮动或避免列表项之间有空格。

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