Daily Archives: July 11, 2014

Removing whitespace between HTML elements

Posted on by

There are a few ways to remove that space, thous are as following:

Solution 1: No Space Between Elements

The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Of course this is a mess to maintain but it's practical, logical, and most importantly...reliable.

Solution 2:  font-size: 0 on Parent

The best white-space solution is to set a font-size of 0 on the parent to the inline block elements.  So if you had a <UL> with inline-block <LI>’s, you’d do this:

.inline-block-list { /* ul or ol with this class */
	font-size: 0;
}

.inline-block-list li {
	font-size: 14px; /* put the font-size back */
}

To counteract the parent font-size setting, you must set a font-size for the list items, but that’s usually fairly simple.   The only time it wouldn’t be simple is if you’re in a wicked cascade of relative units you can’t easily calculate.  In most cases, however, this will be exactly what you need. Update: unless you care to support Android WebKit.

Solution 3:  HTML Comments

This solution is a bit gangsta but also works.  Using HTML comments as spacers between the elements works just as placing no space between elements would:

<ul>
   <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

In a word…gross.  In two words…really gross.  In three words…well, you get it.  But it works!

Solution 4:  Negative Margin

Much like solution two, this is regrettable.  You can take advantage of inline-block’s flexibility to use a negative margin to negate the space:

.inline-block-list li {
	margin-left: -4px;
}

This is the worst solution because you have to account for variable, sometimes unpredictable spacing.  Avoid at all costs.

Solution 5:  Dropping Closing Angle

Another HTML-based hack solution is to simply place the closing > next to the start of the next tag:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Not as ugly as the HTML comment hack but I know I’d probably remove that whitespace and not think about why it was there originally.

good day 🙂

Source: http://davidwalsh.name/remove-whitespace-inline-block