空元素的定位与内容不同吗？

Question

我试图在输入旁边有一个固定大小的<button>。我尝试了以下方法：

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

CSS：

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

这很好用，但是当我从按钮中删除内部HTML时，按钮自动向上移动了13px：

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

Fiddle here

我现在非常好奇导致这种行为的原因是什么我可以阻止它（除了添加例如 或:before之外按钮）？

Answer 1

默认情况下，元素按其基线对齐。在第一个示例中，没有文本，因此元素的基线由元素本身确定为一个框，这意味着浏览器“看到”基线作为元素的底部。

查看vertical-align's possible values，了解最适合您需求的内容。 middle，top和bottom都可以在此处使用，因为您的按钮与输入的大小相同，但会根据您的未来计划进行选择。

Answer 2

使用vertical-align属性更改对齐

button {
  height: 38px;
  vertical-align:middle;
  width: 38px;
}

DEMO