title: How can i turn off automatic vertical alignment of <button>'s contents?
body: <p>Is there a way to turn this feature off? Contents of <code>&lt;button&gt;</code> are always vertically centered, as opposed to what happens in a regular HTML tag.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/HbqnR/" rel="nofollow">http://jsfiddle.net/HbqnR/</a></p>
  
  <p>I want <code>&lt;button&gt;</code> behave like <code>&lt;a&gt;</code>, with the text at the top left corner of the button.</p>
  
  <p><strong>I'm looking for a WebKit specific fix</strong>, maybe there is some <code>-webkit-*</code> css property that controls this behavior. <strong>Hacks are welcome but without using additional markup!</strong></p>
  
  <p>Thank you in advance :)</p>
  
  <hr>
  
  <pre><code>.button
  {
      display:inline-block;
      height:200px;
      border:4px gainsboro outset;
      background:silver;
      vertical-align:middle;
      padding:20px;
      box-sizing:border-box;
      text-decoration:none;
      width:200px;
      text-align:left;
  }
  
  &lt;button class="button"&gt;&amp;lt;button&amp;gt;&lt;/button&gt;
  &lt;a href="http://www.google.com" class="button"&gt;&amp;lt;a&amp;gt;&lt;/a&gt;
  </code></pre>