内联块元素具有不同的垂直对齐

Question

我需要在链接后获得带有图标的链接.

例如:

Link [icon]

我喜欢的线高是30px.所以,我有这样的标记:

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

我认为它应该可行,但高度.phone-support变为41px,但为什么呢？元素不是垂直对齐的.他们在每次之后都很简单,为什么会这样？

PS我的浏览器是Chromium 18.不要注意没有ie-inline-block-fix等等.简化CSS代码只是为了指出问题.

Answer 1

jsBin演示

只是把你的<i>内心<a>.好处？你的形象将是可链接的.

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

比设置a vertical-align:top;将图像设置在<a>父级的顶部.

.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

尝试设置CSS"vertical-align"属性.对于大多数元素,它默认为"baseline",这可能是您唯一不需要的东西.我倾向于支持"vertical-align:middle".

"vertical-align:baseline"会发生什么变化,内嵌块元素在它们下方的间隙大约是字母"g"的悬挂部分的大小,这可能是你看到的额外3个像素的高度.