请问margin-left负值和margin-right正值有什么区别？
来源：3-7 布局-解题-3
慕粉1243980
2021-07-14
我尝试不用right属性，而是用margin-left：-200px以及margin-right：200px，得到的结果出乎意料，发现原先在第一层与中间栏重叠的左边栏移动到了第二层，并且突破了父元素content的范围，挤到了padding的空间。在网上查阅资料后，猜想是否是因为margin-right是父元素右边被拓宽了200px，导致在浮动布局下，左边栏元素有了空位自动换行到第二层，但是仍然不能解释为什么会跟right属性的结果相似又不同
同时，只要有margin-right属性，margin-left就可以把目标元素移动到想要的位置，这是为何？
2回答
-
这几个合起来用就是很乱，所以后来出了 flex 和简化这一问题。而虽然浏览器升级，flex 也基本已经普及使用了。
建议你先不用过于纠结这些，有这个时间把 flex 用熟练了，对你收益更大。
112021-07-14 -
慕无忌6277495
2023-05-08
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的原理，希望对你有所帮助。
00
相似问题