Handling Inline-block Spaces With Javascript

We all know the ages old problem with white spaces between inline-block elements. For example: The best solution in my opinion is to remove any spaces between the elements: Can w

Solution 1:

Using jQuery you can remove all the textnodes which are children of the wrapper element like

$('.wrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).remove();

.wrapper div {
  width: 100px;
  height: 30px;
  display: inline-block;
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Solution 2:

The pure CSS way to do this is to set the font-size of the parent element to 0

.wrapper div 
{
  width:100px; 
  height:30px; 
  display:inline-block; 
  border:1px solid #333;
}

.wrapper {
  font-size: 0;
}

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Solution 3:

If you're worried about the global font-size, then you can try using comments

.wrapper div 
{
  width:100px; 
  height:30px; 
  display:inline-block; 
  border:1px solid #333;
}

<div class="wrapper">
       <div></div><!--
    --><div></div><!--
    --><div></div><!--
    --><div></div>
</div>