CSS块元素margin-top行为因if元素是否有边框而不同

Question

我正在努力解决普通HTML文档中某些CSS块元素的奇怪行为。根据元素是否具有边框，CSS属性margin-top的行为会发生变化。

请参阅this jsFiddle并点击相应部分，了解会发生什么。例如，单击第一部分。在这里，您将看到，如果该部分具有0px边框，h2元素的margin-top: 40px;如何停止工作。

如何解决这个问题？

HTML代码：

<div class="topbar">
    <h1>Hello world!</h1>
</div>
<div class="page-wrapper">
    <section class="page-section">
        <h2>What happens here?</h2>
    </section>
    <section class="page-section">
        <h2>Different Section</h2>
    </section>
</div>

CSS代码

body{
    margin:0;
    padding:0;
}
.topbar{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    text-align: center;
    border: 1px solid silver;
}
.page-wrapper{
    margin-top: 60px;
    border: 1px solid red;
}
.page-section{
    height: 200px;
    border: 1px solid blue;
}
.page-wrapper.active,
.page-section.active{
    border: 0px;
}
.page-section h2{
    margin-top:40px;
}

一些jQuery只是为了切换div边界：

$(document).ready(function(){
    $('.page-section').click(function(){
        $(this).toggleClass('active');
        $('.page-wrapper').toggleClass('active');
    });
});