title: How to reset all default styles of the HTML5 button element
body: <h2>Scenario</h2>
  
  <p>I use the <code>&lt;button&gt;</code> element which appeares just as plain text with an "+" on right end.
  <br/>On click a div element expands and reveals some information. I think the button element is semanticaley correct to represent such a ... button ... trigger.</p>
  
  <h2>Problem</h2>
  
  <p>So I have mixed some buttons and h2 elements and I have got a visual problem. After resetting all <strong>default user agent style's</strong> I expect that every element I introduce to the document looks plain and unstyled.</p>
  
  <p>But the button element does not look that plain. It has an text, slightly, text indention.
  <br /><br /></p>
  
  <h2>Example</h2>
  
  <p><img src="https://i.stack.imgur.com/RY67y.jpg" alt="First, three elements are &lt;h2&gt;&lt;button&gt;TEXT&lt;/button&gt;&lt;/h2&gt; and the two from above are just &lt;h2&gt;TEXT&lt;/h2&gt;"></p>
  
  <p>First, three elements are <code>&lt;h2&gt;&lt;button&gt;text node&lt;/button&gt;&lt;/h2&gt;</code> and the two from above are just <code>&lt;h2&gt;text node&lt;/h2&gt;</code></p>
  
  <h2>CSS</h2>
  
  <pre><code>* {
          /*Reset's every elements apperance*/
          background: none repeat scroll 0 0 transparent;
          border: medium none;
          border-spacing: 0;
          color: #26589F;
          font-family: 'PT Sans Narrow',sans-serif;
          font-size: 16px;
          font-weight: normal;
          line-height: 1.42rem;
          list-style: none outside none;
          margin: 0;
          padding: 0;
          text-align: left;
          text-decoration: none;
          text-indent: 0;
  }
  </code></pre>
  
  <h2>Other element's CSS</h2>
  
  <p>The other elements use background-image, text-transform:uppercase and that's it. In Firebug there are <strong>no</strong> paddings,margins,text-indents or other "soft" or "hard" properties which could mess things up. I played around with display settings but it does not "fix" anything or make it worse.</p>
  
  <h2>Question</h2>
  
  <p>Can anybody explain why, even after resetting the default styles, there is this visual failure on the <code>&lt;button&gt;</code> element?</p>