Html CSS使div在鼠标悬停在旁边的字符上时看起来长大了

我不知道如何使蓝色正方形看起来长大（通过增加顶部的填充）当鼠标悬停在左边的角色上时，我尝试增加顶部的填充，但它将正方形的位置向下移动，使其看起来像是在长大而不是在长大，我尝试过各种各样的事情，但我似乎无法使它长大

：root{--字体大小：16px；}
*{列表样式类型：无；}
html{font-size:var（--font-size）；}
保险商实验室{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
字号：1.25em；
最小高度：10em；
}
李{
位置：相对位置；
显示器：flex；
对齐项目：居中；
颜色：黑色；
边距：1米；
高度：10公分；
}
h{
位置：绝对位置；
顶部：4.5em；
左：1米；
背景颜色：蓝色；
宽度：1米；
高度：1米；
}
h2：悬停+0.h{
垫面：1米；
}

A.

要使正方形向上生长或移动，可以使用负数

边距顶部

，其值与正数

边距顶部

的值相同：

padding-top: 1em;
margin-top: -1em;

：root{--字体大小：16px；}
*{列表样式类型：无；}
html{font-size:var（--font-size）；}
保险商实验室{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
字号：1.25em；
最小高度：10em；
}
李{
位置：相对位置；
显示器：flex；
对齐项目：居中；
颜色：黑色；
边距：1米；
高度：10公分；
}
h{
位置：绝对位置；
顶部：4.5em；
左：1米；
背景颜色：蓝色；
宽度：1米；
高度：1米；
}
h2：悬停+0.h{
垫面：1米；
边缘顶部：-1米；
}

A.

欢迎来到StackOverflow！请阅读当前你的蓝色方块在盘旋在字母上方时变大。请编辑问题，并包括所需的行为，如@Huangism所说的，你所说的“成长”是什么意思？蓝色分区的目的是什么。我很确定你可以用更好的方式处理这个问题。我编辑了这篇文章，希望能更好地解释我的问题。我的意思是，在盘旋字母时，蓝色的正方形变大了，但方向不对，我希望它在相反的方向变大，它现在就变大了。谢谢你，这非常有效，我仍在学习，不太明白它为什么会这样，但它是有效的。@Rafaeleh它是有效的，因为你的正方形变大了1米，负边距顶部将正方形向上拉了1米，所以底部看起来没有移动。常规页边距顶部向下推动元素，而负页边距顶部则将元素向下拉动up@Huangism谢谢，我明白了，我的意思是为什么添加填充顶部会使正方形的位置下降，是因为li中的对齐中心吗？但是绝对位置不应该覆盖它并保持它相对于父对象的相同位置吗？或者我在这里混淆了什么。@Rafaeleh，这是因为你的正方形绝对是从顶部

top:4.5em

所以你的方块总是从位置开始，添加填充顶部只会将方块内部的内容向下推。因此，如果您在悬停时将top值更新为3.5em，那么它也会起作用

top:3.5em而不是负数margin@Rafaeleh例如，如果您希望长方体位于底部xx处，则不要使用顶部，而是使用底部
bottom:1em
。元素完全定位后，它将从您定义的上/下/左/右开始