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() {
  returnthis.nodeType == Node.TEXT_NODE;
}).remove();

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="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

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

.wrapper {
  font-size: 0;
}

<divclass="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

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

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