按钮旁边的输入-更改按钮的字体大小会更改布局

Question

我希望输入和按钮完美地对齐像素。为什么更改按钮元素的字体大小会更改布局？我知道可以通过将vertical-align样式从基线更改为其他样式来解决此问题，但是我不确定为什么需要进行此更改？是否有另一个与字体大小相关的修复程序，可以使这些元素对齐？

input {
  height: 30px;
  box-sizing: border-box;
}

button {
  background-color:blue;
  color: white;
  border: none;
  height: 30px;
  font-size: 5px;
}

<input type="text"><button>I</button>

Answer 1

问题

具有指定高度但字体大小不同的两个内联块元素将无法按预期对齐。

为什么？

内联块元素的默认vertical-align为baseline。这意味着当在任何一个内联块元素中更改字体大小时，该元素将保持其指定的高度，但会移动以使两个元素的文本对齐。

正确的解决方案

由于vertical-align:baseline引起了问题，因此将其设置为bottom或top是正确的解决方法。通过拆分文本的底行，两者将具有对齐元素的效果。