Html CSS边界混淆

只是不明白为什么当鼠标悬停在边框底部时，边框与内容配合得很好，但当更改为边框顶部时，它会向下推动内容

这是密码

ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：15%；
位置：固定；
背景颜色：黄色；
} 
李阿{
显示：块；
高度：50px；
颜色：红色；
文字装饰：无；
文本对齐：居中；
文本转换：大写；
线高：50px；
过渡：.2s全线性；
}
李娜：停下来{
颜色：白色；
边框底部：50px实心亮天蓝；
框大小：边框框；
}

请参见

边框顶部

将元素中的高度从顶部向下添加，

边框底部

也将从底部向下添加高度……因此应用

边框顶部

将始终向下推送文本

实际上，您已将

框大小：边框框

和

高度：50px

应用于该元素…这意味着如果指定了任何

高度

值，则元素的边框将不会影响该元素的高度

正如MDNWebdocs所说

如果从元素中删除

高度

，您将看到

边框底部

将添加以下文本，因为未定义

高度

值

ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：15%；
位置：固定；
背景颜色：黄色；
}
李阿{
显示：块；
颜色：红色；
/*高度：50px*/
文字装饰：无；
文本对齐：居中；
文本转换：大写；
线高：50px；
过渡：.2s全线性；
框大小：边框框；
}
李娜：停下来{
颜色：白色；
边框底部：50px实心亮天蓝；
}

我会稍微改变一下结构，使用覆盖而不是边框。无需使用固定高度

从我看来，边境问题的首要问题实际上是预期的行为。

border-top

和

border-bottom

都会向下推送内容，但由于您使用的是

box-size:border-box

，并且底部边框已经位于文本下方，因此不会看到内容向下移动

ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：自动；
位置：固定；
背景颜色：黄色；
} 
李阿{
显示：块；
位置：相对位置；
颜色：红色；
文字装饰：无；
文本对齐：居中；
文本转换：大写；
填充：20px；
线高：1；
}
李娜：好的{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：100%；
过渡：.2s全线性；
背景色：rgba（0,0,0,0.3）；
}
李a：悬停，覆盖{
底部：0；
}

谢谢您的回复。是的，我也知道。但我还是很困惑，对不起。只是想知道为什么当高度确定时，border bottom不会向上推出内容，而border top会向下推出内容。我错过了一件非常简单的事情……唉。@paulrevere

border-bottom

增加了从底部开始的高度，这样它就不会将内容向上推……这里

框大小：border-box

在这里起着重要的作用……它告诉元素，如果指定了高度，边框将不会影响元素的高度……@paulrevere用移除问题中的

框大小：边框框

，您将看到

边框底部

将向下增加高度，而不是再次向上倾斜！那么，为什么尽管两个边框都显示在元素的高度范围内。。。border top将内容向外推，border bottom不会将内容向外推？@paulrevere因为border bottom在文本下方添加了向下的方向，而不是向上的方向，border top也在文本顶部添加了向下的方向，这就是为什么它将内容向下推的原因……只将高度放在li上，而不是放在li ali a上{border top:50px实心透明；}li a:hover{border top:50px实心lightskyblue；}这不会产生刺痛感，我知道这不是故意的，但这个效果看起来很酷！谢谢你的回复。我会在早上看一看。