Why is content of the inline-block affects its position in the container [duplicate]

Question

Here's a fiddle that shows my code in action

The result seems crazy to me: in Chrome second button is slightly above the first. In Firefox it is slightly below.

<div id="accounts">
  <button class="account">
     <h1>VISA Card</h1>
     <span class="balance">-433.18</span>
  </button>
  <button class="account">
     <h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
     <span class="plus-text">Add Account</span>
  </button>
</div>

What is even more confusing is that padding on the h1.plus affects the position of the whole div.

What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?

UPDATE: Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.

Answer 1

You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.

This is a diagram from the specs which illustrates exactly that:

You can see in the first two boxes how padding and the font size of the content influence the positioning.

As a fix, use vertical-align: top or bottom, or even middle.

---

Edit: The image is from the table section and the situation is slighty different for inline-blocks.