如何为内部div设置margin且保证其不超出父div的范围

box-sizing: border-box只会将元素自身的边框、内边距计入宽高计算，不会包含外边距。你给内部div设置了width: 100%，这个宽度取值是父容器的内容区宽度，再叠加左右各1rem的外边距后，总宽度超过父容器宽度，就会出现溢出。

• 方案1：父容器加内边距替代子元素外边距
  把内部div的外边距转移到父容器的内边距上，父容器开启了border-box，内边距会自动计入自身宽高，不需要调整子元素的宽度设置：

.main-container {
  border: 2px solid red;
  width: 80vw;
  height: 80vh;
  margin: auto;
  /* 新增内边距，对应子元素原来的外边距 */
  padding: 1rem;
}

.inner-container {
  background-color: blue;
  width: 100%;
  height: 50px;
  /* 移除原来的margin: 1rem */
}

该方案兼容性最好，改动量小，适合大部分场景。

• 方案2：用calc动态计算子元素宽度
  直接在子元素宽度里扣除左右外边距的总宽度，不需要修改父容器样式：

.inner-container {
  background-color: blue;
  /* 1rem*2 = 左右外边距的总和 */
  width: calc(100% - 2rem);
  height: 50px;
  margin: 1rem;
}

适合不想调整父容器原有样式的场景。

• 方案3：父容器开启flex布局
  flex布局的子元素会自动适配容器宽度，不需要手动计算宽高：

.main-container {
  border: 2px solid red;
  width: 80vw;
  height: 80vh;
  margin: auto;
  /* 新增flex布局配置 */
  display: flex;
  flex-direction: column;
}

.inner-container {
  background-color: blue;
  /* 不需要手动设置width:100%，flex子元素默认拉伸占满宽度 */
  height: 50px;
  margin: 1rem;
}

适合后续需要在父容器内添加多个子元素、需要灵活布局的场景。

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