Inline-block elements have different vertical alignment

Question

I need to get a link with an icon after a link.

For example:

Link [icon]

The line height I'd like is 30px. So, I have such a markup:

<div class="phone-support">
   <a href="#">We'll call you</a><i class="icon"></i>
</div>

.phone-support a {
   display       : inline-block;
   line-height   : 30px;
   padding-right : 5px;
   height        : 30px;
}

.phone-support i.icon {
   display       : inline-block;
   height        : 30px;
   width         : 30px;
   background    : url('/path/to/sprite.png') -10px -10px;
}

I considered it should work, but the height of .phone-support becomes 41px, but why? And elements aren't aligned vertically. They simple stays each after each, why this happens?

P.S. My browser is Chromium 18. Don't pay attention on that there is no ie-inline-block-fix, etc. CSS code is simplified just to point to the problem.

Answer 1

jsBin demo

Just put your <i> inside the <a>. The benefit? your image will be linkable.

<div class="phone-support">
   <a href="#">We'll call you  <i class="icon"></i> </a>
</div>

Than set a vertical-align:top; to set your image at the top of the <a> parent.

.phone-support i.icon {
     display       : inline-block;
     vertical-align: top;
     height        : 30px;
     width         : 30px;
     background    : url(your url here);
     margin-left   : 10px;  /*add some space*/
}

Answer 2

Try setting the CSS "vertical-align" property. For most elements, it defaults to "baseline", which is probably the only thing you don't want. I tend to favor "vertical-align: middle".

What happens with "vertical-align: baseline" is inline-block elements get a gap beneath them of about the size of the hanging part of the letter "g", which is probably the extra 3 pixels of height you're seeing.