Styling input and span as button class, slight difference - html

Question

I want to make all buttons on my website follow a flat button class, input buttons or span buttons should be exactly the same.
I have applied the same class, removing border, adding padding, etc.. but, the buttons using the element appear slightly bigger than the ones using the form button.
Why is that? What other css property could I edit to make them look the same (aside from having a preset height for all of them?)
This is my button class:
.button{
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
Here is the fiddle: http://jsfiddle.net/raphadko/f3293yeL/

Answer 1

Best solution would be to wrap the buttons inside the spans. That way, you'll total control of the button positioning. Do not use them as button inside a form!
span > .button {
padding: 10px;
display: inline;
border-radius: 2px;
font-family: "Arial";
border: 0;
margin: 0 10px;
background: red;
font-size: 15px;
line-height: 15px;
color: white;
width: auto;
height: auto;
box-sizing: content-box;
}
<form>
<span>
<input type="submit" class="button" value="Button1" />
</span>
<span>
<input type="submit" class="button" value="Button2" />
</span>
<span>
<input type="submit" class="button" value="Button3" />
</span>
</form>
Note: The spans can help you position the element easily but its not advisable to use it as button when a form is concerned.