CODEWITHSUNDEEP
htmlcssvertical-alignment
Eugene
Eugene

Reputation: 11280

Inline-block elements have different vertical alignment

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.

enter image description here

Upvotes: 2

Views: 4836

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206638

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*/
}

Upvotes: 8

Brilliand
Brilliand

Reputation: 13714

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.

Upvotes: 5

Related Questions