问题描述:
假如有一个header的盒子和一个footer的盒子,分别给header盒子
margin-bottom:60px;
再给footer盒子,
margin-top: 15px;
读者朋友你觉得这个中间的边距是多少呢?
答案是:60px
因为边距重合在一起了,选最大者,因此为60px,这是浏览器的一个bug。面试有时会提到。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: #f99;
margin-bottom: 40px;
}
.footer{
width: 100%;
height: 100px;
background: #9ff;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
你可以观察它父盒子的高度,就会清楚的看到边距是多少。
如果是左右呢?读者朋友可以自己试一下。