複製:如何新增頁邊距，以李項

Question

我有一個無序的列表，我將樣式設為none，這將創建預設縮排的空間。

我對邊距和填充的理解是邊距是元素的外層空間，因此我試圖使用margin: 0來修復間隙，但它不起作用。當我使用padding: 0時，它從li項中刪除了縮排的空間。

現在我很困惑為什麼在這種情況下填充而不是邊距。

ul {
  list-style-type: none;
  padding: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

Answer 1

瀏覽器的預設設定是在ui中加入一些填充，而不是邊距。所以使用padding: 0px會覆寫瀏覽器的預設值。

看看右邊的Computed選項卡，它顯示了瀏覽器樣式清單padding-left: 40px;

##

ul.no-padding {
  list-style-type: none;
  padding: 0px;
}

ul.no-margin {
  list-style-type: none;
  margin: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-margin">
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-padding">
  <li>
    Linkedin
  </li>
</ul>