Kopieren: So fügen Sie Ränder zu Elementen hinzu
P粉037215587
P粉037215587 2023-08-02 22:33:27
0
1
495
<p>Ich habe eine ungeordnete Liste und stelle den Stil auf „Keine“ ein, wodurch der standardmäßige eingerückte Leerraum erstellt wird. <br /><br />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. <br /><br />Jetzt bin ich verwirrt, warum es in diesem Fall eine Polsterung und keinen Rand gibt. </p><p><br /></p> <p><br /></p> <pre class="brush:css;toolbar:false;">ul { Listenstiltyp: keiner; Polsterung: 0px; }</pre> <pre class="brush:html;toolbar:false;"><ul> <li> Linkedin </li> </ul></pre> <p><br /></p>
P粉037215587
P粉037215587

Antworte allen(1)
P粉511757848

浏览器的默认设置是在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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage