父元素与子元素之间的margin-top问题(css hack)

最新推荐文章于 2024-09-30 15:23:15 发布

18790970257

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量79

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/thekingofreturn/p/4876792.html

版权

hack：
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <script  src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
 <style type="text/css">
 *{ margin:0px; padding:0px;}
 .main-1{ height:200px; background:#060;}
 .box1{ height:200px; width:300px; background:#f00; float:left;}
 .box2{ height:200px; width:200px; background:#00f; float:left;}
 .main-2{ height:400px; width:800px; background:#000;   }
 .box3{  height:200px; width:600px; background:#603; margin-top:20px;  }
 </style>
</head>

<body> 
   <div class="main">
   <div class="main-1">
     <div class="box1"></div>
     <div class="box2"></div>
     </div>
     
     <div class="main-2">
     <div class="box3"></div>
     </div>
   </div>

</body> 
</html>

demo

注意box3中的 margin-top

解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位

转载于:https://www.cnblogs.com/thekingofreturn/p/4876792.html