子div设置margin-top使得父div也跟着向下移动

  之前在写网页的时候，发现一个小问题，就是子div设置margin-top的时候，父的div也会跟着向下移动。我用代码和图描述一下问题：

 

[html] view plain copy
 
  1. <span style="font-size:14px;"><style>  
  2.  *{margin:0;padding:0;}  
  3.  .div1{background:green;height:100px;}  
  4.  .div2{background:darkblue;height:100px;}  
  5.  .subDiv{background:red;height:40px;}  
  6. </style>  
  7. <body>  
  8. <div class="div1"></div>  
  9. <div class="div2">  
  10.   <div class="subDiv"></div>  
  11. </div>  
  12. </body></span>  


效果是：

 



红色div是蓝色div的子div。然后我设置红色div的margin-top为20px;

结果如下：

 

可以看到，设置margin-top之后，父div跟着子div向下移动了。（白色层为空白处，非div层）

 

解决这个问题的方法是，为父div设置border。为此，我为父div设置border-top:1px solid darkblue;

结果显示：

 

可以看到，子div向下移动了，但是父div并没有向下移动。

 

网上找到的原理：

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

    虽然可以通过给父div添加border可以解决问题，但是总觉得不太好。每次为了实现这样的效果而设置border-top，好像有点累赘。后来在网上看了一些博文，觉得很不错。大概的意思是：margin是用于隔开两个独立元素，而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容，为了使元素和内容隔开，可以使用padding。

    于是，我在父div里面设置了padding-top,也达到了目的

posted @ 2018-04-27 10:57  maxlove  阅读(5065)  评论(0)  编辑  收藏  举报