Inline-Block vs. Float

A demonstration of the different widths experienced between display: inline-block and float: left.

HTML

<div class="wrapper">
  
  <h1>Inline-Block vs. Float - Why Different Widths?</h1>
  
  <h2>Inline-Block / Width 20%</h2>
  
  <ul class="inline-block">
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
  </ul>
  
  <hr>
  
  <h2>Float: Left / Width 20%</h2>
  
  <ul class="float">
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
  </ul>
  
</div>

CSS

.wrapper {
  width: 700px;
  margin: 0 auto;
}
ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  background: #ccc;
}
li {
  width: 20%;
}
ul.inline-block li {
  display: inline-block;
}
ul.float li {
  float: left;
}