css - vertical space being added on elements with display:inline-block [duplicate] - alignment

Question

This question already has an answer here:
Why aren't these elements with display:inline-block properly aligned?
(1 answer)
Closed 7 years ago.
I've got a series of thumbnail container elements with the css property display:inline-block but when they line up next to each other, the second element has more space at the top than the first (see attached image). Any idea why this happens? Is there a better way to line these elements up next to each other? I know that floating them solves this issue, but it seems like floating isn't the best way to go about this.
Here's my code:
HTML:
<article class="thumb_container">
<div class="thumb_content">
<img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/>
<header class="thumb_header">Perlin Lines</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut.
More...
</p>
</div>
</article>
<article class="thumb_container">
<div class="thumb_content">
<img src="images/branching.gif" alt="Branching" class="thumb_img"/>
<header class="thumb_header">Branching</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi.
More...
</p>
</div>
</article>
CSS:
.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); }
.thumb_container:first-child { margin-left: 0px; }

Answer 1

Just add vertical-align: top where you have display: inline-block.
More info here: Why aren't these elements with display:inline-block properly aligned?

Answer 2

You have to think it this way: Inline blocks are basically inline elements with a bit of enhanced behaviour. So what happens, when you place inline elements next to each other? Here an example:
<p>This is <strong>a</strong> <span>stupid</span> example.</p>
In this sentence a and stupid are separated by a white space. That's what you would expect. In your example one article tag is separated with a white space from the next one. So the simplest solution is to strip the white space between the tags like this:
<article>
...
</article><article>
...
</article>
Another solution is to float the container, but the display:inline-block is rendered rather useless, when you use floats. You can simply strip it.

Answer 3

Sometimes floating is the best answer.
.thumb_container {
display: inline-block;
float: left; <-------
margin: 0 0 0 20px;
width: 220px;
background: #fff;
-moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
-webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2);
}
.thumb_container:first-child { margin-left: 0px; }