html,body设置height：100%为什么会出现纵向滚动条

Question

今天很偶然的碰到的一个问题，简化来说，当设置了html,body{height:100%,weight:100%},然后给一个盒子设置margin-top:20% 之后，按道理来说应该是盒子距离浏览器上边界20%的浏览器宽度的距离吧（父元素是body），但是设置之后，我发现盒子的位置并没有跟我想的一样，而是撑高了浏览器的高度，在右侧出现了滚动条。当去掉html,body{height:100%,weight:100%}之后就不会出现滚动条了

我的疑惑就是明明 浏览器本身的高度是足够的，并没有不够容纳20%body高度，为什么浏览器的高度会被撑高？下面上图说明

<style>
    .green {
        background-color: #009926;
        width: 500px;
        margin-top: 20%;

    }
body,html{
    height: 100%;
    width: 100%;
}
</style>

Answer 1

两个问题
1.浏览器自带的body的margin值不为0；
2.垂直外边距合并。

Answer 2

我以前碰到这个问题时候，就把margin改成padding
缺点就是自己得再嵌套个div放真正的内容

Answer 3

本身body设置height：100%，就会出现滚动条，如果你设置了body下的div的margin-top值，不会影响body的高度，只是整个body往下了20%。