為什麼我的內聯塊列表項目即使具有'邊距：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中文網其他相關文章！