Why is the outline of this so much bigger than the actual picture?

This button's height should ideally fill the white space sort of like the outlined blue, but for some reason does not fill up that space.

The code is:

 <button style="float:right !important; width:30%; background-color: transparent; background-size: 100%; border:0;" onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value);return false;">
    <img src="http://ift.tt/21IPL1P" style="width:100%;display: block;">
    </button>

I know that css should probably be in a separate file, but right now I'm just trying to get it to look right first. Thank you!