Html 当我关注/取消关注.username时，密码输入会抖动

当我关注/取消关注密码时，不会发生震动，但当我关注/取消关注用户名时，密码

为什么会发生这种情况&如何阻止这种情况

正文{
背景色：皇家蓝；/*#F0*/
}
标签{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：14px；
z指数：-1；
边界：0；
颜色：白色；
位置：相对位置；
}
.头{
颜色：白色；
左边缘：44%；
字体系列：monospace；
字体大小：25px；
}
/*.内容{
利润率最高：10%；
左缘：41%；
}*/
.密码{
利润率最高：5%；
}
形式{
位置：相对位置；
}
输入{
位置：绝对位置；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：15px；
背景：透明；
边框：0；/*边框是/否*/
底边：2件纯色米色；
背景：透明；
大纲：0；
高度：25px；
宽度：180px；
z指数：1；
边缘顶部：5px；
} 
/*输入：焦点{
大纲：1；
}*/
标签：：之后{
内容：''；
位置：绝对位置；
顶部：1px；
左：0；
宽度：180px；
高度：25px；
边界半径：2px；
转变：转变；
}
标签：：之后{
z指数：-1；
背景：米色；/*#a86bf；*/
变换：scale3d（1,0,1）；
变换原点：0%0%；
}
输入：焦点{
边界半径：2px；
}
输入：焦点+标签：：之后，
输入：有效+标签：：后{
变换：scale3d（1，-1.3,1）；
过渡时间函数：线性；
顶部：-1px；
}
跨度{
位置：相对位置；
利润上限：-30px；
显示：块；
填充：.6em0；
左侧填充：-5px；
过渡：顶部。5s宽，字体大小。5s宽；
/*转变：转变1s2s*/
排名：0；
}
输入：焦点+标签>范围，
输入：有效+标签>范围{
顶部：-20px；
字体大小：11px；
垫底：15px；
}
/*字体系列：monospace*/
/*转换：translate3d（0，-80%，0）*/
/*过渡时间函数：线性*/
登录
用户名
密码
我认为发生的是，您的CSS在
的底部添加了一个小的边距，这导致了您的“抖动”。当您单击密码时不会发生这种情况的原因是密码下没有任何内容。
为两个div容器添加高度，以便它们在单击时保留高度


正文{
背景色：皇家蓝；/*#F0*/
}
标签{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：14px；
z指数：-1；
边界：0；
颜色：白色；
位置：相对位置；
}
.头{
颜色：白色；
左边缘：44%；
字体系列：monospace；
字体大小：25px；
}
.用户名{
高度：40px；
}
.密码{
高度：40px；
}
/*.内容{
利润率最高：10%；
左缘：41%；
}*/
.密码{
利润率最高：5%；
}
形式{
位置：相对位置；
}
输入{
位置：绝对位置；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：15px；
背景：透明；
边框：0；/*边框是/否*/
底边：2件纯色米色；
背景：透明；
大纲：0；
高度：25px；
宽度：180px；
z指数：1；
边缘顶部：5px；
} 
/*输入：焦点{
大纲：1；
}*/
标签：：之后{
内容：''；
位置：绝对位置；
顶部：1px；
左：0；
宽度：180px；
高度：25px；
边界半径：2px；
转变：转变；
}
标签：：之后{
z指数：-1；
背景：米色；/*#a86bf；*/
变换：scale3d（1,0,1）；
变换原点：0%0%；
}
输入：焦点{
边界半径：2px；
}
输入：焦点+标签：：之后，
输入：有效+标签：：后{
变换：scale3d（1，-1.3,1）；
过渡时间函数：线性；
顶部：-1px；
}
跨度{
位置：相对位置；
利润上限：-30px；
显示：块；
填充：.6em0；
左侧填充：-5px；
过渡：顶部。5s宽，字体大小。5s宽；
/*转变：转变1s2s*/
排名：0；
}
输入：焦点+标签>范围，
输入：有效+标签>范围{
顶部：-20px；
字体大小：11px；
垫底：15px；
}
/*字体系列：monospace*/
/*转换：translate3d（0，-80%，0）*/
/*过渡时间函数：线性*/
登录
用户名
密码