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

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的高度变为41像素，但为什么呢？元素不是垂直对齐的。他们在每次之后都很简单，为什么会这样？

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

Answer 1

jsBin demo

只需将<i>放入<a>。好处？你的形象将是可链接的。

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

设置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个像素看到。