如何刪除不需要的空格

Question

我正在通過制作這個網站來練習 html/css，但是在內容列表中的鏈接周圍有一些空格。 我添加了一個關於如何編碼完整列表的 html 代碼示例。

我嘗試將所有元素的邊距和填充設置為零，但沒有任何效果。

 body { margin: 0; } .container { display: grid; grid-template-columns: 20% 80%; margin: 0; } .nav_bar { min-height: 100vh; overflow-y: auto; margin: 0; padding: 0; } .nav_bar ul { display: block; padding: 5px; list-style: none; font-size: 0; margin: 0; } .nav_bar li { padding: 10px 5px; border-bottom: 2px solid black; }

 <div class="container"> <div class="nav_bar"> <h3>JS DOCUMENTATION</h3> <ul class="nav_list"> <li> <a href="page.html#introduction">Introduction</a> </li> </ul> </div> </div>

在此處輸入圖片說明

Answer 1

您已為ul標記提供了padding ，這就是該行未觸及兩個極端的原因。

只需將ul的padding更改為0

這是你想要的 ？ 我添加了顏色以顯示問題發生的位置

 body { margin: 0; } .container { display: grid; grid-template-columns: 40% 30%; margin: 0; padding:0; } .nav_bar { min-height: 100vh; overflow-y: auto; margin: 0; padding: 0; } h3 { padding: 10px 5px; } ul { display: block; padding: 0px; font-size: 0; margin: 0; } li { padding: 10px 5px; border-bottom: 2px solid black; } li:first-child { border-top: 2px solid black; } a { text-decoration: none; color: black; font-size: 18px; font-weight: 300; }

 <div class="container" style="background-color:green;"> <div class="nav_bar" style="background-color:lightblue;"> <h3 style="background-color:red;">JS DOCUMENTATION</h3> <ul style="background-color:pink;" class="nav_list"> <li> <a href="page.html#introduction">Introduction</a> </li>

Answer 2

你期待這樣嗎：

注意：在全屏模式下檢查我的答案

#drop-down{
padding-inline-start:0;  /*use this css */
}

HTML：

  <ul class="nav_list" id="drop-down">   <!-add id="drop-down" to ul-->
    <li>
     <a href="page.html#introduction">Introduction</a>
    </li>
  </ul>

 #drop-down { padding-inline-start: 0; } * { box-sizing: border-box; } body { margin: 0; } .container { display: grid; grid-template-columns: 20% 80%; margin: 0; } .nav_bar { min-height: 100vh; overflow-y: auto; margin: 0; padding: 0; } .nav_bar h3 { padding: 10px 5px; } .nav_bar ul { display: block; padding: 5px; list-style: none; font-size: 0; margin: 0; } .nav_bar li { padding: 10px 5px; border-bottom: 2px solid black; } .nav_bar li:first-child { border-top: 2px solid black; } .nav_list a { text-decoration: none; color: black; font-size: 18px; font-weight: 300; }

 <div class="container"> <div class="nav_bar"> <h3>JS DOCUMENTATION</h3> <ul class="nav_list" id="drop-down"> <li> <a href="page.html#introduction">Introduction</a> </li> </ul> </div> </div>

Answer 3

假設您指的是list items上的填充（您當前未在 css 中配置），您可以執行以下操作；

.nav_list li {
  padding-left: 0;
  padding-right: 0;
}

這將刪除unordered list每個list item左側和右側的填充。

另請注意，在您的問題中，您尚未將所有填充設置為 0。

.nav_bar ul {
  display: block;
  padding: 5px;
  list-style: none;
  font-size: 0;
  margin: 0;
}

如果這不是我們想要的行為，請務必將unordered list的填充也設置為0 。