Html 元素在悬停状态下移动，因为添加了边框，填充（如其他地方所建议的）不会'；好像不行

当我将鼠标悬停在测试网站的某个区域上时，我将其设置为添加边框。但由于这种情况的发生，其他元素也会移动。我查阅了其他帖子，他们建议添加填充，但这似乎不起作用，因为它覆盖了其他内容

这是我添加边框的地方：

#logo:hover {
  border: 2px solid cyan;
}

这是它添加到的内容：

#logo {
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

有人知道如何帮助我吗？还有我问问题的方式

#徽标{
背景色：黑色；
宽度：200px；
高度：200px；
位置：相对位置；
顶部：80px；
线高：12em；
边界半径：200px；
利润率：0 10px 0 10px；
溢出：隐藏；
}
#标志：悬停{
边框：2倍纯青色；
}

您可以添加：

* {  box-sizing: border-box;}

到您的css工作表，或者可能只是到您的

#徽标

id

你可以找到更多关于这方面的信息（至少对我来说是惊人的财产）

---

（以防万一……标记的代码将该属性应用于web中的每个html元素，这正是我在过去的许多项目中所做的，毫无遗憾）

您应该将

框大小：边框框

添加到CSS中的相关元素中。这将使填充物位于容器的宽度内

---

下面是一个代码笔来演示：

您应该尝试将其添加到您的#徽标中：

这将使：

#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}

或者使用

框大小：边框框

希望有帮助

---

干杯

或者选择

框大小：边框框也可以使用calc函数减去一个值

#logo:hover {
    width: calc(200px - 4px);
    height: calc(200px - 4px);
    border: 2px solid cyan;
}

当你处理百分比时，这个方法可能会很有用，不管怎样，在这样的情况下，这是一个很酷的技巧
 框大小：在这种情况下，边框框并不能使“圆”与边框一起正确渲染-尽管这是一个惊人的特性。如果是我，我会将您的css更改为以下内容：

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

并将您的#徽标类别边距调整为

{margin: 0 9px 0 9px;}

有点“黑客”，但我更喜欢这种行为
你也可以使用方块阴影：

 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }

尝试使用位置：绝对；因为具有绝对位置的图元对其他图元没有影响。确保父元素具有相对位置。比如说

`
#父元素{
位置：相对位置

}

#标志{
位置：绝对位置；
}`
我同意你的回答，但是我认为CSS属性应该只设置在
#logo:hover
上。这确实会阻止元素移动，但也会破坏边框的用途。在这种情况下，我添加了边框，这样它就可以正确对齐，但是这个属性似乎会将边框添加到内部。
 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }