How to reset all default styles of the HTML5 button element

Question

Scenario

I use the <button> element which appeares just as plain text with an "+" on right end.
On click a div element expands and reveals some information. I think the button element is semanticaley correct to represent such a ... button ... trigger.

Problem

So I have mixed some buttons and h2 elements and I have got a visual problem. After resetting all default user agent style's I expect that every element I introduce to the document looks plain and unstyled.

But the button element does not look that plain. It has an text, slightly, text indention.

Example

First, three elements are <h2><button>text node</button></h2> and the two from above are just <h2>text node</h2>

CSS

* {         /*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; } 

Other element's CSS

The other elements use background-image, text-transform:uppercase and that's it. In Firebug there are no 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.

Question

Can anybody explain why, even after resetting the default styles, there is this visual failure on the <button> element?

Answer 1

button::-moz-focus-inner, input::-moz-focus-inner {   border: 0;   padding: 0; } 

add this one also in css it will solve your problem.