这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>活动</title>
<style>
.top{
background: orange;
padding-top:1px;
/*border:1px solid transparent;*/
/*overflow:hidden;*/
}
.abs{
position: absolute;
top:40px;
right:20px;
}
</style>
</head>
<body>
<div class="top">
<div class="page-header">
<h2 class="text-center text-danger">活动</h2>
<span class="text-right pull-right abs"><img src="src/assets/logo.png" alt="" width="30" height="30"></span>
</div>
</div>
</body>
</html>