css - vertical space being added on elements with display:inline-block

Question

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.
            <a href="#">More...</a>
        </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. 
            <a href="#">More...</a>
        </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; }

Top Margin Issue

score 40 · Accepted Answer · edited May 23 '17 at 12:32

40

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?

edited May 23 '17 at 12:32

Community

1
1

answered Nov 08 '11 at 19:06

thirtydot

224,678
48
389
349

Thanks. I spent too much time looking for spaces int he actual code. – Jan 27 '14 at 16:56

score 1 · Answer 2 · answered Nov 08 '11 at 18:57

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.

score 0 · Answer 3 · answered Nov 08 '11 at 18:28

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; }

css - vertical space being added on elements with display:inline-block

3 Answers3