CSS-Layout by Inline-block

To layout websites with CSS property display: inline-block is better than float.

Recently, I have to handle some Front-ends problems. Float layout is out now. And I find a better method to layout websites with CSS: display: inline-block.

Basically, inline-block is a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top.

But, there is a problem with this layout which is the default value of browers’ letter-spacing make inline-block elements with a space. This can be solved by set letter-spacing: -3px and font-size: 0 to have a hacking.