Home / Questions / 302252
Accepted
ASASCED
Asked: 2020-10-20 22:53:27 +0800 CST 2020-10-20 22:53:27 +0800 CST

How to remove trailing spaces CSS?

  • 772

I have these elements created to make a navbar but the problem to start with the li is that they have a small space on the right when I put the property display: inline-blockand in the case of the navbar that I am adding only the white background color and a shadow It puts a space at the bottom that I don't know why.

enter image description here

CSS

nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
}

li {
    display: inline-block;
    height: 100px;
}

HTML

<nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>
html

1 Answers

  1. Best Answer

    The spaces that appear are predefined in the element ul, margin (left space) and spacing (top and bottom space) to eliminate it define them with value 0 .

    margin:0;
padding:0;

    in your code it would look like this:

    nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
    padding:0;
    margin:0;
}

li {
    display: inline-block;
    height: 100px;
}
    <nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>

    I hope it helps you, greetings.

    • 1