css – “margin-left”和“left”(或“margin-right”和“right”)之间的差异

前端之家收集整理的这篇文章主要介绍了css – “margin-left”和“left”(或“margin-right”和“right”)之间的差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有什么区别
margin-left:10px;和位置:相对;左:10px;?

它似乎产生了相同的结果

解决方法

当您使用position:relative移动某个东西时,您实际上并没有移动它在页面上占据的空间,只是在它显示的位置.

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

<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;}

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

编辑:你可以在这里查看它:http://www.jsfiddle.net/PKqMT/5/

评论这个位置:相对;和顶部:100px;线条和取消注释边缘顶线,你会看到差异.

猜你在找的CSS相关文章