CSS中，我們經常需要使用

和
• 來創建無序列表，并設置適當的間距，讓頁面顯示更美觀。而其中
• 的間距就由CSS的屬性margin來控制。

  ul {
  list-style: none; /* 去除自帶的樣式 */
  padding: 0; /* 取消默認的內邊距 */
  }
  li {
  margin-bottom: 10px; /* 設置下方間距 */
  }

  上述代碼中，我們使用了list-style來去除默認的點狀樣式，使用padding來取消默認的內邊距。而下方的10px的間距則由margin-bottom來控制。

  若想要設置上方的間距，則需要使用margin-top：

  li {
  margin-top: 10px; /* 設置上方間距 */
  }

  還可以通過margin來同時設置四個方向的間距：

  li {
  margin: 10px 0; /* 上方和下方都設置10px，左右不設置 */
  }

  如果想要精確控制四個方向的間距，則需要寫成這樣：

  li {
  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  }

  這樣就可以分別設置每一個方向的間距了。

  使用CSS的margin屬性，我們可以輕松地控制

  和
  • 元素之間的間距，達到更好的頁面效果。