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

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

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


不是的

举个例子:

<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 的空隙才对


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

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

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


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

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

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

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


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


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


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

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

  2. 至于

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

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


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

【热门文章】
【热门文章】