Button display inline CSS

Question

I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/

.one {
  padding: 20px;
  background: #f00;
}
.two {
  padding: 20px;
  background: #00f;
}
a,
button {
  font-family: Arial, Helvetica;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  color: #000;
  display: inline;
  border: 0;
  text-decoration: none;
}

<div class="one"></div>
<div class="two">
  <a href="#">Link</a>
  <button>Button</button>
</div>

As you will notice, the button doesn't appear as inline. Why is this? Can anyone help me put this button inline, just like its sibling a?

ISSUE

By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?

Answer 1

This is the second question I've seen recently about the trying to set a button to display:inline and it seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect, <button> is not a replaced element.

In fact, the HTML5 spec Section 10.5.2 The button element makes this requirement:

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.