在“左边距"和“左边距"之间的区别在于: (或"margin-right"和"right")) [英] Difference between "margin-left", and "left" (or "margin-right", and "right")

问题描述

之间有什么区别 margin-left: 10px;和position: relative; left: 10px;?

似乎产生了相同的结果

推荐答案

使用position:relative移动某些内容时，实际上并没有移动它在页面上所占据的空间，而只是在显示该页面的地方.

When you move something with position:relative you're not actually moving the space it takes up on the page, just where it is displayed.

一种简单的测试方法是使用这样的简单结构:

An easy way to test this is to use a simple structure like this:

<div id = "testbox">
  <img src = "http://www.dummyimage.com/300x200" id = "first">
  <img src = "http://www.dummyimage.com/300x200" id = "second">
</div>

使用以下CSS:

img{ display:block; }
#first{ margin-top:50px; }

相对于此CSS:

img{display:block;}
#first{position:relative; top:50px;}

您会看到第一个将所有内容向下移动50像素，而第二个仅将第一张图像向下移动(这意味着它将与第二张图像重叠).

You'll see that the first moves everything down 50px while the second only moves the first image down (which means it will overlap the second image).

您可以在此处进行实际操作: http://www.jsfiddle.net/PKqMT/5/

you can check it out in action here: http://www.jsfiddle.net/PKqMT/5/

注释position:relative;和top:100px;行并取消注释margin-top行，您将看到区别.

Comment out the position:relative; and top:100px; lines and uncomment the margin-top line and you'll see the difference.

这篇关于在“左边距"和“左边距"之间的区别在于: (或"margin-right"和"right"))的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！