Question

Below is a jfiddle containing the following html.

<span class="label label-warning">helloworld</span>
<a href="#" class="btn btn-medium"><i class="icon-copy"></i></a>

I run into this issue a lot, where two inline-block / inline elements are side-by-side and don’t match up at the same top. I believe this has something to do with the line-height of both elements not being the same. Is there any hack to combat this effect?

http://jsfiddle.net/YfZVS/

Current Configuration:

Desired Effect:

Answer 1

.btn { vertical-align: top; }

Works on this browser… I can’t check any others atm. here’s the fiddle