空元素的位置与内容元素的位置不同?

我想买一个固定尺寸的 <button> 输入旁边。我尝试了以下方法:

<form>
  <input type="text">
  <button type="submit">S</button>
</form>

CSS(客服代表):

input {
  height: 38px;
  width: 50%;
}
button {
  height: 38px;
  width: 38px;
}

<form>
  <input type="text">
  <button type="submit"></button>
</form>

Fiddle here

在这一点上,我真的很好奇是什么导致了这种行为,我能做些什么来防止它(除了添加例如   或a :before 按钮)?