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

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>

比设置一个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个像素的高度。