为什么设置margin-right：400px不行？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .test{
     width: 800px;
     height: 100px;
     background: red;
     position:fixed;
     left:50%;
     margin-right:400px;
   }
   .out{
    width: 100%;
    height: 2000px;
    background-color: #abcdef;
  }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
  </div>
</body>
</html>

我看了问答里给的答案是设置margin-left：-400px；不是很明白设置margin为-400的意思，所以我想的是设置margin-right：400；，但是为什么没有效果，两者有什么区别呢？

宝慕林842399 2019-01-14

源自：CSS定位（position） 2-14 编程练习

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2019-01-15 14:49:51

同学你好，margin-right是右外边距，可以理解为下一个兄弟元素的位置是在这个margin-right之后的位置处，这里没有兄弟元素，所以看不出来，可以参考如下例子，给第一个元素设置margin-right值，它的右边有外边距，所以第二个元素的位置是在这个400px之后哦，例：

希望能帮助到你，祝学习愉快！

收起回答

好帮手慕糖 2019-01-15 10:48:03

同学你好，margin-right:400;是设置右外边距为400px。

设置左外边距为负值，是会往左移动的哦。

在定位的情况下，设置left:50%;margin-left:-自身宽度的一半，可以实现水平居中。

原理可以参考下图来理解：

因为先设置了left50%，就是如下的情况，红色div块向右移动了父级的50%，现在div红色块左边框部分所在的位置就是父级的50%处（一半），所以红色块设置margin-left:负的自身的一半，会让红色块本身向左移动自身的一半，这个时候，红色块的一半处以父级的一半处不就正好在同一个位置么，可以测试下，先设置left:50%，看下效果哦。