css中之margin属性

　　css中的margin属性看似简单，但是有时稍有不慎，就会造成错误。这篇博文我会和大家分享将margin属性用在父元素和子元素之间可能出现的状况。

　　例1：

效果如下所示：

对于这样的结果毫无疑问，可是如果我们希望绿色的div可以靠下面一些，即上边不要紧贴着红色div。既然是两个div的间距，我们可以在绿色div上使用margin-top来使之分离吗？看下面的例子。

　例2

　我们在上面（例1）的代码中加margin-top:50px;于绿色div的css中，效果如下所示：

即我们发现两者并没有分离，而是红色的div和浏览器显示界面的上方分开了50px；

于是说明：父元素和子元素之间不可使用margin-top，如果在子元素中使用，则会作用在父元素与其他元素上。

例3：

　　我们在例1的基础上在子元素的css中加入margin-left:50px;效果如下：

这时，margin-left没有像例2中一样使父元素和浏览器上边距分开，而是真的实现了子元素的左边框和父元素的左边框之间margin为50px；这一点非常值得注意。

例4

　　我们在例1的基础上在子元素的css中分别加margin-right和margin-bottom，发现结果和例1完全一样，也就是说，在父元素和子元素之间使用margin-right和margin-bottom一点用都没有！！！

上面的几个例子使用的margin值均为整数，那么当margin值为负数的时候效果又是怎么样的呢？

例5

　　我们在例1的基础上在子元素的css中加入margin-top:-50px;效果如下所示：

可见子元素连同父元素的一部分都同时隐藏在了浏览器的输入栏中，这没有达到我们所希望的效果。不可用！

例6

　　我们在例1的基础上在子元素的css中加入margin-left:-50px;效果如下所示：

于是我们发现只有绿色div发生了偏移，则说明margin-left可用！！

例7：

　我们在例1的基础上在子元素的css中分别加margin-right和margin-bottom，可以发现，在加上之后与例1中不使用margin的情况相同，毫无效果，完全不可用。

总结如下：

• 在父元素和子元素之间使用margin-top属性，效果作用在父元素和其他元素上，达不到我们想要的效果！ 不推荐在父元素和子元素之间使用margin-top。
• 在父元素和子元素之间使用margin-left属性，可以达到我们想要的效果。推荐在父元素和子元素之间使用margin-left。
• 在父元素和子元素之间使用maring-right和margin-bottom属性，毫无效果!于是不推荐使用margin-top和margin-left。

结语：这篇博文我是在chrome浏览器下测试上述例子而写的，难免有考虑不周之处，若有错误希望大家批评指正。

css中之margin属性