問題出現：
給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值
<body>
<div class="box">
<div class="content" id="content"></div>
</div>
</body> div,body{
padding: 0;
margin: 0;
}
body{
background-color: darkgrey;
}
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
}
.content {
width: 50%;
height: 50%;
margin-top: 70px;
background-color: tomato;
} <script type="text/javascript">
window.onload = function(){
var he = document.getElementById('box');
alert(he.offsetTop); //70,這裏應該是50纔對
}
</script>
上面的js代碼和圖片顯示：
1.子元素與父元素的margin並沒有體現出來
2.子元素與父元素的margin-top的值，應用給了父元素的margin-top
解決辦法：
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
padding-top: 1px; //添加
} window.onload = function(){
var he = document.getElementById('box');
alert(he.offsetTop); //50
} .box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
border: 1px solid transparent; //添加
}3、爲父元素添加overflow：hidden；樣式即可（完美）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden; //添加
}3、爲父元素或者子元素聲明浮動（float：left；可用）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
float: left; //添加
}5、爲父元素或者子元素聲明絕對定位
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
position: absolute; //添加
}原因：
1.當一個元素包含在另一個元素中時（假設沒有填充或邊框將邊界分隔開），它們的頂和/或底邊界會發生疊加
2.只有普通文檔流中塊框的垂直邊界纔會發生邊界疊加。行內框、浮動框或絕對定位框之間的邊界不會疊加。
詳情見：http://blog.csdn.net/weisuochengxuyuan/article/details/17379517