CodePen

HTML

            
              <h2>Inline Block Spacing Fix</h2>

<a href="http://css-tricks.com/fighting-the-space-between-inline-block-elements/">Reference</a>

<p><strong>font-size: 1em</strong></p>
<ul class="small serif">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="small sans">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="small monospace">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<p><strong>font-size: 2em</strong></p>
<ul class="large serif">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="large sans">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="large monospace">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
            
          
!

CSS

            
              .large {
  font-size: 2em;
}
.small {
  font-size: 1em;
}
ul {
  display:table; /* Webkit - Perfect */
  word-spacing: -0.25em; /* IE 10-8, FF, Opera - Not perfect but close */
}

ul li {
  display: inline-block;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.5);
  color: white;
  padding: 5px;
  word-spacing: normal;
  zoom: 1; *display: inline; /* IE < 8: fake inline-block, also fixes spacing issue */
}
.serif {
  font-family: "Times New Roman";
}
.sans {
  font-family: Tahoma;
}
.monospace {
  font-family: monospace;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................