使用box-sizing:border-box后边框仍改变元素尺寸的问题求助

核心问题原因 #

box-sizing: border-box确实会让元素的边框/内边距计入自身宽高，但你的Grid容器原本设置了margin-left: 20px，添加border-left:8px后，容器整体的左侧偏移量会变成20px + 8px = 28px，同时Grid的总宽度也会增加8px，直接导致所有内容右移。

可行解决方案 #

直接给选中的容器添加负margin抵消边框宽度，就能保留原生边框效果的同时固定内容位置：

.border-selected {
  border-left: 8px solid #1f7a7a;
  /* 用负margin抵消边框带来的偏移，让容器整体左侧偏移量保持20px不变 */
  margin-left: -8px;
}

这种写法会让边框“延伸”到原本margin-left:20px的区域里，容器整体占用的位置和未添加边框时完全一致，内容自然不会偏移。

修改后的完整代码示例 #

* {
  margin: 0;
  box-sizing: border-box !important;
}

.grid-wrap-3 {
  margin-top: 0px;
  display: grid;
  grid-template-columns: 85px 260px 180px 120px 159px 240px 240px 100px 65px 65px 100px;
  grid-template-rows: 90px auto;
  gap: 4px;
  align-items: center;
  margin-left: 20px;
  transition: box-shadow .1s;
}

.border-selected {
  border-left: 8px solid #1f7a7a;
  margin-left: -8px;
}

<div class="grid-wrap-3 border-selected" id="cell2">
  <div class="flex-center">
    <img id="square2" class="icon-square-check" src="assets\icons\square-check-regular.svg" onclick="squareChange(this)">
  </div>
  <div>
    <h2 class="name">Abramov Andrey</h2>
    <p class="undertext">163</p>
  </div>
  <div>
    <h3 class="small-text position">Product manager</h3>
    <p class="undertext">3 years</p>
  </div>
  <div class="flex-center team-text-shift">
    <h3 class="small-text">10</h3>
  </div>
  <!-- 其他内容 -->
</div>

补充思路 #

如果担心负margin影响布局，还可以采用预占空间的方式：给Grid容器默认设置padding-left:8px，同时把第一个列宽改为calc(85px - 8px)；非选中状态下设置border-left:8px solid transparent，选中时替换为目标颜色。这种方式也能保证内容位置固定，但需要调整初始的Grid列宽和容器内边距。

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