如何使按钮、选择框和输入框高度一致？按钮需用padding实现

我明白你现在的困扰——既要统一表单元素（按钮、输入框、选择框）的高度，又得兼顾按钮文本换行时的兼容性，不能用固定height只能靠padding来实现。我之前也碰到过类似的协作场景，给你几个可行的调整方向：

1. 统一盒模型与垂直对齐基准 #

首先要消除浏览器默认样式和盒模型差异带来的高度偏差，给所有表单元素统一设置盒模型和垂直对齐方式：

input, select, button {
  box-sizing: border-box; /* 让padding和border不额外撑开元素 */
  vertical-align: middle; /* 统一基线对齐，避免元素错位 */
}

2. 用行高+内边距匹配所有元素高度 #

输入框和选择框的实际高度是由line-height加上上下内边距决定的，你可以先算出这类元素的总高度，再给按钮设置对应的上下padding和相同的line-height，同时重置按钮的默认样式：

/* 先定义输入框/选择框的基础样式 */
input[type="text"], select {
  padding: 8px 12px;
  line-height: 1.5;
  border: 1px solid #ccc;
}

/* 按钮匹配对应高度，同时兼容文本换行 */
button {
  padding: 8px 16px; /* 上下padding和输入框保持一致 */
  line-height: 1.5; /* 和输入框的行高完全匹配 */
  border: none; /* 清除浏览器默认边框，避免额外高度 */
  white-space: normal; /* 允许文本换行，防止截断 */
  min-height: calc(1.5em + 16px); /* 单行时保证最小高度和其他元素一致 */
}

3. 修复选择框的浏览器默认样式差异 #

不同浏览器的选择框自带默认内边距和下拉箭头，会打乱高度对齐。可以用appearance清除默认样式，再自定义下拉箭头：

select {
  appearance: none; /* 移除原生下拉样式 */
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23666" d="M4 6l4 4 4-4"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px; /* 给自定义箭头留出空间 */
}

4. 排查继承样式干扰 #

如果还是有高度偏差，检查是否有父元素的line-height、font-size等属性被继承，导致不同元素的基础排版不一致。可以给所有表单元素显式设置font-size和font-family，消除继承影响：

input, select, button {
  font-size: 14px;
  font-family: inherit;
}

核心思路就是通过统一盒模型、行高、内边距来对齐高度，同时用padding和min-height保证按钮在文本换行时不会被截断，完全满足你和协作开发的需求。

内容的提问来源于stack exchange，提问作者user1406440