咨询：CSS中margin-left与margin-right表现差异的原因

核心原因 #

• 你的div设置了width: 100%，这个宽度是相对于父容器（body）的内容宽度计算的。
• 当设置margin-left: 50px时，div的总占用宽度为100% + 50px，直接超过了body的内容宽度，浏览器会显示水平滚动条（溢出效果），同时左边的margin区域因为body的绿色背景暴露出来，所以能看到绿色区域。
• 而设置margin-right: 50px时，浏览器会自动调整div的实际宽度为父容器内容宽度 - 50px，相当于直接覆盖了你设置的width: 100%。这时候div并没有超出body范围，右边的空间是div宽度收缩后让出来的，不是margin撑开的，所以既看不到绿色的margin区域，也不会产生溢出。

验证方法 #

如果把div的宽度改成固定值（比如width: 500px），再设置margin-right: 50px，就能看到右边的绿色margin区域了：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: greenyellow;
  border: 1px solid red; /* 加边框更直观看到body范围 */
}

.myDiv {
  width: 500px; /* 固定宽度 */
  height: 50px;
  background-color: rgb(112, 112, 0);
  margin-right: 50px; 
}

这时候div的总宽度是500px + 50px，不会被浏览器自动收缩，只要body宽度大于这个值，就能看到右边的绿色margin区域。

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