Hong's Blog, Space Between inline-block Elements

Share a weird css issue I met today, that isthere are always some space between inline-block div elements of a line. For these div elements, margin are confirmed to be 0. See how it looks in the top part of below snapshot.

And below is corresponding code snippet,

<div style="border:red 1px solid;">
    <div style="width: 100px;display:inline-block; border:green 1px solid;">div 1</div>
    <div style="width: 150px;display:inline-block; border:green 1px solid;">div 2</div>
    <div style="width: 100px;display:inline-block; border:green 1px solid;">div 3</div>
</div>

After some time on googling, the root cause was located; It’s the whitespace between inline-block div elements. In the above code, whitespace is newline character.

Two solutions can be used to fix this issue. One is eliminating whitespace, like

<div style="border:red 1px solid;">
    <div style="width: 100px;display:inline-block; border:green 1px solid;">div 1
    </div><div style="width: 150px;display:inline-block; border:green 1px solid;">div 2
    </div><!-- no space here --><div style="width: 100px;display:inline-block; border:green 1px solid;">div 3
</div></div>

The other is to use display:table-cell;, which may be better than former method, since it does not hurt your beautiful format.

<div style="border:red 1px solid;">
    <div style="width: 100px;display:table-cell; border:green 1px solid;">div 1</div>
    <div style="width: 150px;display:table-cell; border:green 1px solid;">div 2</div>
    <div style="width: 100px;display:table-cell; border:green 1px solid;">div 3</div>
</div>

Reference here. Code for above snapshot here.