Fix HTML White-Space Rendering from Inline-Block

Using the CSS property, inline-block provides an alternative to floats where elements align side by side without having to clear. They can be given a height and width, opposed to the inline property. The issue with this display property is that it renders HTML white-space, sometimes causing an alignment to break. Here are a number of ways to prevent this.

Grid using inline-block Demo

The vertical line is set at the baseline by default. When using inline-block, add vertical-align: top so that elements align at the top of their respected containers.

.content, .sidebar {
  display: inline-block;
  vertical-align: top;
}

Use HTML Comment tags.

<ul><!--
--><li><a href="">Home</a></li><!--
--><li><a href="">About</a></li><!--
--><li><a href="">Contact</a></li><!--
--></ul>

Set a CSS negative margin.

ul li a { 
  margin-left: -4px; 
}

Remove white-space from the HTML.

<ul>
<li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Contact</a></li>
</ul>

Although these methods may seem a little hacky, inline-block is still a good alternative to avoid clearing...Just make sure to check for whitespace.

From Floats, to Inline-block, to Flexbox

Flexbox presents a new way of how we do CSS layouts. Simply add the flex property, display: flex, to the container, and its children can be set horizontally or vertically along an axis. The container automatically adjusts elements to fit according to its dimensions. Once flex is set, child elements can use various properties to define the layout. Here's an example.

Simple grid using flex - CodePen demo

Flex-direction flex-end and justify-content are just a few of the many cool things you can do with flexbox, and there’s no clearing or white-space issues.

This website uses flex on its container as follow:

.container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.content {
  width: 80%;
}
.sidebar {
  width: 20%;
}

caniuse.com - Flexbox