How to remove the space between two inline buttons?

Question

I want to create a navbar that has four inline buttons. However, when I do this, there is a bit of whitespace in-between each button.

I have tried display: inline and display: inline-block, but neither helps on its own.

I can get it to work with float: left, but I generally do not like using floats. Is there another way?

Thanks!

Jesse

div {
  margin: 0;
  padding: 0;
  border: 0;
}

div ul {
  margin: 0;
  padding: 0;
  border: 0;
  
  list-style: none;
}

div ul li {
  margin: 0;
  padding: 0;
  border: 0;
  
  display: inline;
  /* float: left; */
}

div ul li button {
  margin: 0;
  padding: 20px;
  border: 0;
  
  text-align: center;
}

#one {
  background-color: blue;
}

#two {
  background-color: orange;
}

#three {
  background-color: purple;
}

#four {
  background-color: yellow;
}

<div>
  <ul>
    <li>
      <button id="one">Button 1</button>
    </li>
    <li>
      <button id="two">Button 2</button>
    </li>
    <li>
      <button id="three">Button 3</button>
    </li>
    <li>
      <button id="four">Button 4</button>
    </li>
  </ul>
</div>

score 3 · Answer 1 · answered Sep 16 '16 at 22:53

Inline elements are sensitive to white space in your code, so just remove it.

div {
  margin: 0;
  padding: 0;
  border: 0;
}
div ul {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
div ul li {
  margin: 0;
  padding: 0;
  border: 0;
  display: inline;
  /* float: left; */
}
div ul li button {
  margin: 0;
  padding: 20px;
  border: 0;
  text-align: center;
}
#one {
  background-color: blue;
}
#two {
  background-color: orange;
}
#three {
  background-color: purple;
}
#four {
  background-color: yellow;
}

<div>
  <ul>
    <li>
      <button id="one">Button 1</button></li><li><button id="two">Button 2</button></li><li><button id="three">Button 3</button></li><li><button id="four">Button 4</button></li>
  </ul>
</div>

Note that you can also remove the white space by occupying it with HTML comments 

How to remove the space between two inline buttons?

1 Answers1