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; }
The inline-block display property treats block level elements (e.g. <div> ) as an inline element (e.g. <span> ), and, just like if you had a line break between two <span> elements, the line-break between the <div> s is creating a space between the <div> s. That extra margin is actually a space—not a margin.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With