老师，请问margin-left:-100px和margin-right:100px是一样的吗？
来源：3-2 圣杯布局案例（了解即可）
慕粉8021849
2019-05-28 22:06:11
老师，请问margin-left:-100px和margin-right:100px是一样的吗？
写回答
1回答
-
你好，如果是单独设置这两个属性，效果是不一样的哦，例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <style> .parent { width: 500px; height: 300px; background-color: red; margin-left: 200px; font-size: 0; border: 1px solid yellow; } .parent.two { margin-top: 100px; } .child, .box { display: inline-block; width: 100px; height: 100px; background-color: blue; } .child { margin-left: -100px; } .box { margin-right: 100px; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="parent two"> <div class="box"></div> <div class="box"></div> </div> </body> </html>效果：
margin-left是从元素左边开始的间距，如果是正值，元素会向右移动，如果是负值，元素向左进行移动。
margin-right是从元素右边开始的间距，如果是正值，元素右侧会有间距，后面的元素会排在间距右侧；如果是负值，元素宽度会减少间距的宽度（元素本身宽度不变），后面的元素会和前面元素重合间距的宽度，如下：
自己可以测试下，祝学习愉快！
0
相似问题