title: CSS vertical alignment within inline-block
body: <p>I'm trying to style some buttons with CSS and my button container is an inline-block with the text vertically centred within the block using line-height. The problem is when I add an icon to the button using another inline-block it seems to adjust the vertical alignment of the preceding text although the icon is correctly aligned in the middle.</p>
  
  <pre><code>&lt;style&gt;
  .button {
      background: #ccc;
      display: inline-block;
      padding: 6px 6px 5px 6px;
      line-height: 16px;
      height: 16px;
      position: relative;
      vertical-align: text-bottom;
  }
  .button .icon {
      background-image: url("../images/button-down.png");
      display: inline-block;
      height: 16px;
      width: 16px;
      margin: 0;
      text-indent: -99999px;
      overflow: hidden;
      background-repeat: no-repeat;
      position: relative;
  }
  &lt;/style&gt;
  
  &lt;!-- with icon --&gt;
  &lt;a href="#" class="button"&gt;Save &lt;span class="icon"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;!-- without icon --&gt;
  &lt;a href="#" class="button"&gt;Save&lt;/a&gt;
  </code></pre>
  
  <p>When the icon is present the text is shifted down. I could do with some help understanding why the icon block effects the position of the preceding text.</p>