添加边框会改变相对于父 div 的宽度答案

【问题标题】：Adding border changes width relative to parent div添加边框会改变相对于父 div 的宽度
【发布时间】：2023-02-21 15:38:17
【问题描述】：

我有以下 CSS：

.subtask {
  background: var(--offwhite-color);
  margin: 0.3em;
  padding: .625em 1.25em;
  width: 60%;
  margin-left: .9em;
}

.subtask.highlight {
  border-left: .3em solid var(--secondary-color);
}

其中 .subtask.highlight 仅呈现为 onClick()。但是，与未呈现 .highlight 时相比，这会将宽度扩展到超过固定宽度。我希望宽度保持不变，但在左侧添加边框。我怎样才能做到这一点？

查看开发工具，似乎我的规范都没有被覆盖，所以我想知道发生了什么。

【问题讨论】：

尝试向子任务类添加透明边框 .subtask{border-left: .3em solid transparent;}
我曾经使用的一个常见技巧是将边框设置为透明，这样宽度在不同状态下始终相同

标签： javascript html css reactjs

【解决方案1】：

尝试添加透明边框子任务班级

.subtask {
      background: var(--offwhite-color);
      margin: 0.3em;
      padding: .625em 1.25em;
      width: 60%;
      margin-left: .9em;
      border-left: .3em solid transparent;
    }
    
    .subtask.highlight {
      border-left: .3em solid var(--secondary-color);
    }

【讨论】：