请问margin-left负值和margin-right正值有什么区别？

Question

我尝试不用right属性，而是用margin-left：-200px以及margin-right：200px，得到的结果出乎意料，发现原先在第一层与中间栏重叠的左边栏移动到了第二层，并且突破了父元素content的范围，挤到了padding的空间。在网上查阅资料后，猜想是否是因为margin-right是父元素右边被拓宽了200px，导致在浮动布局下，左边栏元素有了空位自动换行到第二层，但是仍然不能解释为什么会跟right属性的结果相似又不同

同时，只要有margin-right属性，margin-left就可以把目标元素移动到想要的位置，这是为何？

Answer 1

双越 2021-07-14 16:58:44

这几个合起来用就是很乱，所以后来出了 flex 和简化这一问题。而虽然浏览器升级，flex 也基本已经普及使用了。

建议你先不用过于纠结这些，有这个时间把 flex 用熟练了，对你收益更大。

• 提问者 慕粉1243980 #1

  多谢老师的建议和回答

Answer 2

慕无忌6277495 2023-05-08 11:39:07

            margin设置为负值之后,会影响父容器给它分配空间的大小:

            如: 父容器div中, 有3个子div, 父容器设置float属性为left

                >>> 父容器宽度210px, 子容器宽度均为100px, 渲染效果: div1-div2并列渲染在第一行, div3靠左渲染在第2行。

                    原因:

                        >>> 如果父容器足够宽, div1-2-3向左浮动,依次渲染在父容器的第一行。

                        >>> 因为父容器210px的宽度,渲染完div1-2后只剩下10px, 不够渲染div3, 所以div3渲染在了第二行。

                >>> 给div3设置 margin-right:-95px; 发现div3渲染在了父容器的第一行div2的后面。

                    原因:

                        >>> margin-right设置为负值,会把其右侧的元素拉过来,即让右侧元素左移。

                            之所以会这样,是因为: 父容器将分配给该元素的空间,从右边开始释放了设定值个大小的像素,供右侧元素使用。

                        >>> 当margin-right=-95px后, 原本要给该元素分配100px的空间, 释放95px后,现在只需要5px的空间就够了。

                            第一行空间分配给div1-2后, 还剩10px, 够给div3分配了, 所以div3不会换行, 而是向左浮动到div2的右侧!

                >>> margin设置负值, 只会影响父元素给其分配的空间的大小, 不会影响该元素渲染时的真正宽高!

                        >>> 负值, 父容器会缩小给该子元素分配的空间。

                        >>> 正值, 父容器会扩大给该子元素分配的空间。

                        >>> 至于设置margin-top|bottom|left|right, 只是规定了父元素在缩小该元素分配空间时,是从哪个方位缩小的。

               

基于以上设置margin的原理，希望对你有所帮助。