为什么下面的布局始终会出现垂直滚动条

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
    html, body {
        height: 100%;
        margin:0px;
        padding:0px;
    }
    #test {
        width: 200px;
        height: 200px;
        margin: 60px auto 20px;
        border: 1px solid #ddd;
        background-color: #f00;
    }
    </style>
</head>
<body>
    <div id="test">demo</div>
</body>
</html>

这叫做外边距合并,属于父元素与第一个/最后一个子元素的情形.
你可以用如下代码取消边距合并

cssbody {
    overflow:hidden;
}

【热门文章】