Kopieren: So fügen Sie Ränder zu Elementen hinzu

Question

Ich habe eine ungeordnete Liste und stelle den Stil auf „Keine“ ein, wodurch der standardmäßige eingerückte Leerraum erstellt wird.

Mein Verständnis von Rändern und Auffüllung ist, dass Rand der äußere Raum eines Elements ist, also habe ich versucht, margin: 0 zu verwenden, um die Lücke zu schließen, aber es hat nicht funktioniert. Wenn ich padding: 0 verwende, wird das eingerückte Leerzeichen aus den li-Elementen entfernt.

Jetzt bin ich verwirrt, warum es in diesem Fall eine Polsterung und keinen Rand gibt.

ul {
  Listenstiltyp: keiner;
  Polsterung: 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>