為什麼內聯塊列表項有不需要的邊距，如何修復它們？

內聯塊列表項目中不需要的邊距

在列表中顯示內聯塊元素時，用戶可能會遇到項目周圍不需要的邊距。儘管明確將邊距設為 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中文網其他相關文章！