Html 如何使边界处于悬停状态的图元不增加其计算的高度/宽度

我遇到的一个常见问题是，我想让一个元素在悬停时有一个边框，但当边框出现在元素的计算高度和宽度增加时，它会在视觉上跳跃，有时会推动元素。有没有办法不用

max width

和

max height

来解决这个问题

小提琴：

#mydiv{背景：黄色；填充：15px；边框：0；}
#mydiv:hover{border:1px纯黑色；}
这里有一个元素。当边框出现时，观察文本跳转

不悬停时，与其没有边框，不如给它一个透明的1px边框？这样，它将始终具有相同的间距，只是悬停时的颜色不同

<style>
    #mydiv { background: yellow; padding: 15px; border: 1px solid transparent; }
    #mydiv:hover { border-color: black; }
</style>
<div id="mydiv">
    <p>Here's an element. Watch the text jump when the border appears.</p>
</div>

#mydiv{背景：黄色；填充：15px；边框：1px实心透明；}
#mydiv:hover{边框颜色：黑色；}
这里有一个元素。当边框出现时，观察文本跳转

不悬停时，与其没有边框，不如给它一个透明的1px边框？这样，它将始终具有相同的间距，只是悬停时的颜色不同

<style>
    #mydiv { background: yellow; padding: 15px; border: 1px solid transparent; }
    #mydiv:hover { border-color: black; }
</style>
<div id="mydiv">
    <p>Here's an element. Watch the text jump when the border appears.</p>
</div>

#mydiv{背景：黄色；填充：15px；边框：1px实心透明；}
#mydiv:hover{边框颜色：黑色；}
这里有一个元素。当边框出现时，观察文本跳转

我认为您需要添加

框大小：边框框到您的CSS中，用于
#mydiv
。这意味着填充和边框包含在元素height和widt中，而不是添加到元素中

或者。。将边框设置为黄色以匹配content div背景色。
我认为您需要添加
框大小：边框框到您的CSS中，用于
#mydiv
。这意味着填充和边框包含在元素height和widt中，而不是添加到元素中

或者。。将边框设置为黄色以匹配content div背景色。
实现此目的的最简单方法是默认应用透明边框：

<style>
    #mydiv {
        background: yellow; 
        padding: 15px; border: 0;
        border: 1px solid rgba(0,0,0,0);
    }
    #mydiv:hover { border: 1px solid black; }
</style>


#mydiv{
背景：黄色；
填充：15px；边框：0；
边框：1px实心rgba（0,0,0,0）；
}
#mydiv:hover{border:1px纯黑色；}
实现这一点的最简单方法是在默认情况下应用透明边框：

<style>
    #mydiv {
        background: yellow; 
        padding: 15px; border: 0;
        border: 1px solid rgba(0,0,0,0);
    }
    #mydiv:hover { border: 1px solid black; }
</style>


#mydiv{
背景：黄色；
填充：15px；边框：0；
边框：1px实心rgba（0,0,0,0）；
}
#mydiv:hover{border:1px纯黑色；}
使用
框大小：边框框
使您的宽度和高度包括边框


边框框-宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距

使用
框大小：边框框
使您的宽度和高度包括边框


边框框-宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括边距

这并不能解决问题；下面是他添加了CSS规则的JSFIDLE：这并不能解决问题；下面是他添加了CSS规则的JSFIDLE：