Inline CSS Display Button

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>

Run codeHide result

As you noticed, the button does not appear as inline. Why is this? Can someone help me put this button on inline, just like her sibling a?

RELEASE

By changing buttonto a, you will notice that the display: inlineaddition of the parent element makes it ignore the indentation of both child elements, which makes them really visible inline. The problem is that the tag buttondoes not appear on the line, which makes adding the parent element pushing both elements down. How can i fix this?

Answer 1

, display:inline , , . display:inline , , <button> .

HTML5 10.5.2 :

, , " ", , - .

, , , . , display:inline-block, . .

Answer 2

line-height:17px; a, button,

.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;
  line-height: 17px;
}

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

Hide result