问题现象与影响
表单输入框在点击获取焦点时出现位置上下或左右跳动，同时相邻表单元素之间的间距忽大忽小，不符合设计的预期数值。这类问题会导致用户在填写表单时产生视觉干扰，降低操作流畅度，也会让页面整体布局显得不够严谨，影响产品的专业形象。
输入框焦点跳动的成因与解决
成因分析
输入框焦点跳动最常见的原因是获取焦点时添加了边框或者内边距，但是没有提前预留对应的空间，导致元素尺寸变化后挤开周围的内容。比如默认输入框没有边框，获取焦点时添加2px的边框，元素宽度和高度都会增加4px，就会引发位置偏移。
解决方案
可以通过提前预留边框空间的方式避免尺寸变化，示例代码如下：
/* 提前设置透明边框，获取焦点时只修改边框颜色，不改变尺寸 */
input {
box-sizing: border-box;
border: 2px solid transparent;
padding: 8px 12px;
transition: border-color 0.2s ease;
}
input:focus {
border-color: #409eff;
outline: none;
}
这里使用box-sizing: border-box让内边距和边框计入元素宽度，避免内容区域被挤压。同时提前设置透明边框，获取焦点时只修改颜色，元素总尺寸不会发生变化，就不会出现跳动问题。
表单元素间距异常的原因与优化
外边距合并问题
相邻表单元素之间的间距不符合预期，大多是因为垂直方向的外边距合并。比如两个输入框都设置了margin-bottom: 16px，实际两个元素之间的间距还是16px，而不是32px，这就是外边距合并导致的。
优化方案
可以通过统一设置单方向外边距，或者使用相邻兄弟选择器控制间距，示例代码如下：
/* 方案1：统一设置下外边距，最后一个元素去除外边距 */
.form-item {
margin-bottom: 16px;
}
.form-item:last-child {
margin-bottom: 0;
}
/* 方案2：使用相邻兄弟选择器，只给相邻元素之间添加间距 */
.form-item + .form-item {
margin-top: 16px;
}
如果表单中混合了输入框、下拉框、按钮等不同类型的元素，还可以给每个表单元素包裹统一的容器，通过容器的外边距控制整体间距，避免不同元素默认样式差异带来的间距问题。
完整表单优化示例
下面是一个完整的表单优化代码示例，同时解决了焦点跳动和间距问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优化后的表单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form-container {
width: 400px;
margin: 40px auto;
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 8px;
}
.form-title {
font-size: 18px;
margin-bottom: 24px;
text-align: center;
}
.form-item {
margin-bottom: 16px;
}
.form-item:last-child {
margin-bottom: 0;
}
.form-label {
display: block;
margin-bottom: 6px;
font-size: 14px;
color: #333;
}
.form-input {
width: 100%;
height: 40px;
padding: 8px 12px;
border: 2px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.form-input:focus {
border-color: #409eff;
outline: none;
}
.form-btn {
width: 100%;
height: 40px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.form-btn:hover {
background-color: #337ecc;
}
</style>
</head>
<body>
<div class="form-container">
<h3 class="form-title">用户信息表单</h3>
<div class="form-item">
<label class="form-label">用户名</label>
<input type="text" class="form-input" placeholder="请输入用户名">
</div>
<div class="form-item">
<label class="form-label">密码</label>
<input type="password" class="form-input" placeholder="请输入密码">
</div>
<div class="form-item">
<button class="form-btn">提交</button>
</div>
</div>
</body>
</html>
注意事项
- 修改输入框样式时尽量不改变元素的盒模型总尺寸，避免引发布局偏移
- 表单元素的间距控制尽量统一使用一种方式，不要混合设置上下外边距
- 如果需要兼容旧版本浏览器，要注意
box-sizing属性的前缀兼容问题 - 焦点样式除了修改边框，也可以添加轻微的阴影效果，提升交互感知
CSSform_inputfocus_stylemargin_collapse修改时间：2026-06-21 07:45:23