之所以margin-left为负可以使元素向左移动是不是因为负的margin-left增大了margin-right？

Question

margin-left: -100px;可以使元素向左移动100px，原因是不是因为margin-left+border-left+padding-left+width+padding-right+border-right+margin-right为定值,margin-left减了100使得margin-right增了100而引起了左移？
看了回答，明白不是这个原因了，那到底是什么原理使得负margin会引起移动呢？

Answer 1

margin-left/margin-right/margin-top/margin-bottom的值是否影响定位，跟如下CSS属性有关系：

• writing-mode/unicode-bidi/direction
• float:left/float:right
• position: absolute/position: fixed定位 & left/top & right/bottom 属性
• text-align也会影响到行内元素的左右margin

在以上特例之外，最常见的的文档排版方向是：

• 块级元素从上到下
• 行内元素从左到右

想象一下，这个排版方向可以感性理解为盒子的堆叠方向……堆叠盒子的方向是从左向右的时候，盒子是一个一个从最左侧往右放的，基于左侧的位移（margin-left）可以生效，基于右侧的位移（margin-right）不能生效，因为要知道盒子的位置，你得看在你左边的盒子的厚度。懂了吗？

因此，在正常情形下，margin-left是可以影响到元素的偏移量的。

---

LZ对布局的理解非常诡谲……我建议LZ先完成：

• 对W3school的css布局相关内容的学习
• 从旧往新，读完CSS探索之旅：margin系列的文章

Answer 2

不不不，不是这么做的，这只不过是影响了盒模型的一边而已，和右边没关系的

用firebug等能够高亮显示盒模型的工具，自己调一下属性能有很明确的理解

负margin引起移动是因为这个东西的对齐是以左方向为基准的。如果你对一个float:right; width:100px;的盒子去修改margin-left，我看一般都不会发生什么移动的效果。

Answer 3

不是的

举个例子：

<div id="wrapper">
    <div id="content">abc</div>
</div>

#wrapper{
    margin:0 auto;
    width: 800px;
    padding: 20px 0;
    background-color: #ccc;
}

#content {
    margin-left: -100px;
    background-color: #fcc;
}

可以看到，margin-left 为 -100px 的情况下，#content 的左边超出了父元素的左边界，但是右边仍然和父元素的右边界贴在一起
如果 margin-right 增加 100px，那么 #content 的右边和父元素的右边界应该有 100px 的空隙才对

Answer 4

先吐槽一下LZ的那段东西十分之诡异啊..

1. 这是因为margin-left是相对于容器的左边作为参考标准的。

2. 至于

   那到底是什么原理使得负margin会引起移动呢

我觉得LZ是不是想搞清楚为什么margin-left可以让元素移动？我觉得这已经上升到了哲学的范畴了有木有。。因为这是约定俗成的规定，不然大家不遵守规定，不同浏览器会有不同浏览效果。

---

其实我到现在都没搞懂LZ到底想问些什么。有点表达不清啊。。XD

Answer 5

两个div，比如float为left或是display为inline-block，margin-left为负你试试，margin-right为正你再试试？