盒子边框无法居中及hover时位移问题求助

问题根源 #

1. Hover时元素移动：添加边框时未设置box-sizing: border-box，边框会额外占用空间，导致元素尺寸变化产生偏移；
2. 内部色块无法居中：使用绝对定位手动设置top/left的方式不够精准，且没有利用父容器的定位实现自适应居中。

修正后的代码 #

CSS #

.attribute-block {
    margin-bottom: 30px;
}

.attribute-block a {
    text-decoration: none;
    display: inline-block; /* 确保a标签包裹的容器布局正常 */
}

.attribute-colour-hover-border {
    position: relative;
    display: inline-block;
    border: 1px solid transparent; /* 初始透明边框，避免hover时尺寸变化 */
    width: 40px;
    height: 40px;
    box-sizing: border-box; /* 边框纳入尺寸计算 */
    padding: 3px; /* 预留内缩空间 */
}

.attribute-colour-hover-border:hover, .attribute-colour-hover-border-selected {
    border-color: black; /* hover和选中时显示边框 */
}

.attribute-colour {
    width: 100%;
    height: 100%;
    display: block;
}

.attribute-colour-selected {
    width: 100%;
    height: 100%;
    display: block;
}

HTML #

<p style="margin-bottom: 10px">Colour <strong>Black</strong></p>
<div class="attribute-block">
  <a href="">
    <div class="attribute-colour-hover-border-selected">
      <div class="attribute-colour-selected" style="background: #000000"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #ad2b50"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #406872"></div>
    </div>
  </a>
  <a href="">
    <div class="attribute-colour-hover-border">
      <div class="attribute-colour" style="background: #3a5127"></div>
    </div>
  </a>
</div>

关键修改说明 #

• box-sizing: border-box：让边框宽度包含在元素的width/height内，hover时添加边框不会改变元素整体尺寸，彻底解决偏移问题；
• 初始透明边框：替代原有的border: 0，确保hover前后元素的占位尺寸完全一致，无跳动；
• 利用padding实现内缩：父容器设置padding:3px，内部色块占满父容器空间，自然形成内缩效果，比绝对定位的手动偏移更精准且适配性更强；
• 统一色块尺寸：内部色块设为width:100%;height:100%，自动适配父容器，无需手动计算固定尺寸，维护更方便。

内容的提问来源于stack exchange，提问作者Jonathan Clark