如何删除不需要的空格

Question

I am practicing html/css by making this website but there are some white spaces to the left and right around the links in list of contents. I have added a sample of html code of how complete list is coded.

I have tried setting the margins and paddings of all elements to zero but nothing is working.

 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>

enter image description here

Answer 1

You have given the padding to the ul tag that is the reason why the line did not touch two extreme ends.

just change the padding in the ul to 0

Is this what you are looking for ? I added the color in order to show where the problem occured

 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

Are u expecting like this :

NOTE: CHECK MY ANSWER IN FULL SCREEN MODE

#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

Assuming you mean the padding on the list items (which you don't currently confiugre in your css), you can do the following;

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

This will remove the padding on the left and right side side for each list item in your unordered list .

Also note that in your question, you have not yet set all paddings to 0.

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

If this is not desired behaviour, be sure to set the padding of the unordered list to 0 too.