為什麼我的內嵌塊列表項中有不需要的邊距？

內聯區塊清單項目中不需要的邊距

在HTML 版麵包含內聯區塊元素清單的情況下，您可以遇到清單項目周圍出現不必要的邊距。要解決此問題，了解原因並找出適當的解決方案至關重要。

邊距的原因：

問題是由於使用顯示而產生的：列表項目上的內聯塊。內聯塊元素本質上會創建空白，從而導致每個元素的右側有 4px 邊距。

解決方案1：轉換為float: left;

只需更改顯示屬性為浮動：列表項目的左側將消除不需要的

li {
    float: left;
    ...
}

解決方案2：連接清單項目標籤

或者，您可以透過在單一清單項目標籤上連接來刪除空格

• 第一個 div>
• 第一個
first
• first

解決方案3：消除區塊標籤

另一個選項是消除清單項目中的區塊標籤，確保所有內容都呈現在單一內容上行：

• 第一個