CSS相同单位margin右间距大于左间距原因及容器居中方案问询

问题成因 #

1. 默认盒模型规则导致容器溢出：CSS默认box-sizing: content-box，你给.container设置的width仅代表内容区宽度，额外设置的margin、border会叠加在内容区外计算总宽度，导致.container实际总宽度超过父元素（如body）的可用宽度，右侧直接溢出可视区域，视觉上表现为内部元素的右侧间距是左侧的两倍。
2. 边距设置不对称：你后续调整的.inner-container样式中，左右margin本身设置的数值不一致（左侧0.1rem、右侧0），进一步加剧了间距不对等的问题。
3. 缺少居中配置：块级元素默认撑满父元素宽度，没有设置margin-left: auto+margin-right: auto的情况下，不会自动水平居中。

解决方案 #

第一步：全局统一盒模型（必加，避免后续同类问题） #

在CSS开头添加如下规则，让所有元素的padding、border都计入设置的宽度范围内：

* {
  box-sizing: border-box;
}

第二步：调整.container样式，避免自身溢出 #

将原来的margin、width配置改为如下写法，保证.container本身在页面内水平居中，不会溢出：

.container {
  width: calc(100% - 1rem); /* 总宽度占满父元素，左右各预留0.5rem边距 */
  margin: .5rem auto; /* 上下边距保持0.5rem，左右自动平分剩余空间实现居中 */
  /* 原有border、border-radius、text-align等属性保留不变 */
}

如果不需要固定左右0.5rem的边距，也可以直接写width: 98%; margin: .5rem auto;效果一致。

第三步：调整.inner-container样式实现内部居中 #

两种方案选其一即可：

方案A：用auto margin实现居中

.inner-container {
  /* 替换原来不对称的margin配置 */
  margin: 0.5rem auto 0.2rem;
  width: calc(100% - 0.2rem); /* 左右各预留0.1rem间距，可根据需求调整差值 */
  /* 原有background、border、padding等属性保留不变 */
}

方案B：父容器加padding实现固定间距（更简单，推荐）

不用改.inner-container的宽度和margin，直接给.container添加左右padding即可：

.container {
  /* 原有属性基础上添加 */
  padding: 0 0.1rem; /* 左右内边距就是你要的两个容器之间的左右间距 */
}
.inner-container {
  /* 把左右margin设为0即可，其他属性保留 */
  margin: 0.5rem 0 0.2rem 0;
}

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