How to remove unwanted whitespaces

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

Yeah sure. Because I don't know what might be causing problem that's is why i added most of css — DaxoBro, Sep 05 '19 at 09:45
Possible duplicate of [How do I remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) — Rob, Sep 05 '19 at 10:32

score 1 · Answer 1 · answered Sep 05 '19 at 10:11

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>

Amaresh S M · Answer 2 · 2019-09-05T09:54:45.567

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>

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start padding inline start is experimental and I wouldn't recommend using that in production — Pete, Sep 05 '19 at 09:55
yes, But he want to remove that space( padding-inline-start ) so only I posted @Pete ji — Amaresh S M, Sep 05 '19 at 09:57
it worked. plus another solution i set the padding of ul to zero. — DaxoBro, Sep 05 '19 at 10:08

Webber · Answer 3 · 2019-09-05T10:26:23.423

-2

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.

edited Sep 05 '19 at 10:26

answered Sep 05 '19 at 09:42

Webber

4,672
4
29
38

Would appreciate explanation for downvotes, as this actually solves the OP's problem in a minimal way. – Webber Sep 05 '19 at 09:46
@DaxoBro specified the 5px padding in the opening post, i assume this is desired behaviour. The question clearly states: `there are some white spaces to the left and right around the links in list of contents`. I'm answering the quesiton directly without making any assumptions. – Webber Sep 05 '19 at 10:07
2

Pete you're right i set the padding to 0 and it worked – DaxoBro Sep 05 '19 at 10:13
I updated my answer to account for the 5px. well spotted. – Webber Sep 05 '19 at 10:26

How to remove unwanted whitespaces

3 Answers3