如何调整grid两列布局的边框贴合内容 消除左padding产生的多余空白

问题原因 #

你当前的多余空白是因为将padding-left: 140px直接设置在了带边框的父容器.totalContainer上：内边距的作用就是撑开元素边框和内部内容的距离，这部分空白是你主动声明的padding的默认效果。
你用到的box-sizing: border-box的作用仅为「将元素的边框、内边距纳入总宽高的计算逻辑，避免元素被padding/border撑超出预设尺寸」，它不会消除你主动设置的padding本身的占位，因此不会解决当前的边框和内容留白问题。

解决方案 #

把父容器的左内边距转移到内部的第一个子元素上即可，父容器仅保留上下内边距，修改后的SCSS代码如下：

.totalContainer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 30px;
  border: 1px solid rgba(72, 82, 93, 0.8);
  border-radius: 12px;
  box-sizing: border-box;

  &__row {
    background-color: #E5E5E5;
  }

  &__space {
    // 去掉原来的左padding，仅保留上下内边距
    padding: 10px 0;
  }

  &__text {
    font-size: 13px;
    // 给第一个文本项加左内边距，实现内容缩进的效果
    &:first-of-type {
      padding-left: 140px;
    }
  }

  &__result {
    text-align: right;
    // 如果需要右侧内容也和边框保留距离，可以加对应右内边距
    // padding-right: 20px;
  }
}

修改后边框会直接贴合grid布局的内容区域，内容的缩进效果保留，不会再出现边框和内容之间的多余空白。

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