表单控件需统一重置 padding、margin 和 box-sizing；input/textarea 要设 line-height 防文字偏移；select 避免 padding-right，推荐 appearance: none + 自绘箭头；checkbox/radio 应 vertical-align: middle 且 margin 作用于 label。
input、select、textarea 的默认 padding 和 margin 差异
浏览器对不同表单控件的默认 padding 和 margin 处理不一致，比如 input[type="text"] 在 Chrome 中默认有 padding: 1px 2px，而 select 可能是 padding: 1px 4px，textarea 则常带更大的内边距。这会导致并排布局时高度错位、对齐发虚。
- 统一重置建议：显式设置
padding和margin，不要依赖用户代理样式 - 注意
box-sizing: border-box必须开启，否则padding会撑大控件宽度 -
margin建议设为0或统一值（如margin-bottom: 8px），避免因默认外边距差异导致垂直节奏断裂
为什么给 input 设置 padding 后文字被截断或偏上？
常见于未处理行高与字体度量的关系。当只设 padding 而没配 line-height 或 height，尤其是使用非系统字体（如 font-family: "PingFang SC", sans-serif）时，文字可能贴顶或下沉。
-
解决方法：为所有文本类控件（
input[type="text"]、input[type="email"]、textarea）统一设line-height: 1.5或具体像素值（如line-height: 24px） - 避免仅靠
height强制拉高——它会挤压内容区，导致光标位置异常或文字裁剪 - 若用
em单位设padding，注意其计算基准是父元素font-size，而非控件自身字体大小
select 下拉箭头在不同浏览器中被 padding 推挤或消失
Chrome / Edge 的原生 select 会在右侧保留固定区域渲染下拉图标，该区域不受 padding-right 影响；但 Firefox 会把 padding-right 应用到整个内容区，导致图标被遮挡或文字溢出。
- 安全做法：避免对
select使用padding-right，改用padding-left+text-indent微调文字起始位置 - 如需完全自定义外观，应配合
appearance: none+ 自绘箭头（用::after伪元素），此时必须手动补全padding-right空间 - 切勿对
select设height后再加padding—— 容易触发 Safari 的渲染 bug，导致下拉菜单无法展开
checkbox 和 radio 的 margin 对齐为何总“浮起来”？
这些控件默认是 inline 级别，基线（baseline）对齐方式导致它们与相邻文字或标签存在视觉错位，看起来像“悬浮”。单纯调 margin-top 是治标，根本在于控制垂直对齐行为。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：统一设
vertical-align: middle，并确保父容器行高稳定（如line-height: 1.6） -
margin应作用于包裹它们的label，而非控件本身；例如label > input[type="checkbox"] { margin: 0; }，再通过label的margin控制整体间距 - 避免用
float或position: relative调整位置——会破坏可访问性（屏幕阅读器顺序、焦点管理）
/* 推荐的基础重置片段 */
input, select, textarea, button {
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
line-height: 1.5;
}
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
margin: 0;
}实际项目里最常被忽略的是 line-height 与 font-family 的组合影响，以及 select 在 Firefox 下对 padding-right 的特殊响应。这两个点不验证多浏览器表现，上线后基本必出对齐问题。
