为何width:100%元素设margin-right不向左溢出，margin-left则向右溢出？

当内层div设置width:100%时，加margin-left:150px会向右溢出父容器，但替换成margin-right:150px时，内层div既不会向左溢出，看起来margin-right还像没生效——但开发者工具明明显示margin-right已经加上了，这到底是怎么回事？

代码示例 #

CSS

.outer {
  width:50vw;
  height:50vh;
  background-color:black;
  margin:auto;
}

.inner {
  width:100%;
  height:50%;
  background-color:pink;
  margin-left:150px
}

.outer1 {
  width:50vw;
  height:50vh;
  background-color:violet;
  margin:auto;
}

.inner1 {
  width:100%;
  height:50%;
  background-color:yellow;
  margin-right:150px
}

HTML

<div class="outer">
  <div class="inner">
    <p>Inside parent container(not body), width:100% ; margin-left ; overflow to the right
  </div>
</div>

<div class="outer1">
  <div class="inner1">
    <p>Inside parent container(not body), width:100% ; margin-right ; doesnt overflow to the left
  </div>
</div>

核心原因：块级元素的水平布局规则（左到右书写模式下） #

CSS正常流中的块级元素，水平布局遵循强制等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父容器可用宽度

当你给内层div设置width:100%时，这个值直接等于父容器的可用宽度，等式平衡被打破：

1. 设置margin-left:150px的情况：
   总宽度变成150px + 父容器宽度，远超父容器可用宽度。浏览器会直接把元素的起始位置向右偏移150px，元素本身宽度还是父容器宽度，因此元素结束位置会超出父容器右侧150px，出现向右溢出。

2. 设置margin-right:150px的情况：
   总宽度变成父容器宽度 + 150px，同样超出父容器可用宽度，但左到右书写模式下，块级元素默认左对齐——浏览器不会为了容纳margin-right而把元素往左拉，而是保持元素左边缘与父容器左边缘对齐，width占满父容器宽度。此时margin-right的150px会被“挤”到元素右侧的父容器外部，因父容器默认overflow:visible，这部分不会被裁剪或触发滚动，所以看起来像margin-right没生效，但它确实存在于父容器可视范围之外。

让margin-right生效的方法 #

如果想让margin-right在width:100%的场景下让元素向左收缩，可通过以下方式：

• 去掉width:100%，让width默认取auto，浏览器会自动计算width值，使总宽度等于父容器可用宽度（即width = 父容器宽度 - margin-right），自动留出右侧margin空间。
• 使用box-sizing:border-box配合width:calc(100% - 150px)，手动计算宽度，把margin的空间纳入width的计算中。

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