为什么margin-top在body内部的div元素上，在页面上显示滚动条？

Question

我希望能够在不获取滚动条的情况下为nav div添加top-margin。我是否必须添加overflow：hidden; to body元素或在body元素div元素上添加padding-top而不是margin-top？或者有更好的方法来实现这一目标吗？为什么会发生这种情况？

我能够在这里重现它：https://jsfiddle.net/dup1d62k/1/

我在body元素中有一个简单的html strcuture：

<div class="nav">
  <div class="item">home</div>
  <div class="item">login</div>
  <div class="item">signup</div>
</div>

CSS：

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;    
    height: 100%;
}

.nav {
    display: table; // To center without giving a fixed width.
    margin: 0 auto;
    margin-top: 30px;
}
.nav:before, .nav:after {
    display: table;
    content: '';
}
.nav:after {
    clear: both;
}
.nav .item {
    float: left;
    padding: 8px;
    background: #f5f5f5;
}
.nav .item:hover {
    background: #e5e5e5;
    cursor: pointer;
}
.nav .item.active {
    background: #e5e5e5;
}

由于nav class div元素的上边距，我得到了这个30 px偏移的滚动条。经过这么多年，我仍然不了解CSS。