为什么我这段代码中最终显示的高度是480px
<!DOCTYPE html>
<html>
<head>
<title>innerHeight和scrollHeight的区别</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<style type="text/css">
body{
margin:10px 20px;
}
</style>
<body>
<script type="text/javascript">
var x1 = document.body.clientHeight || document.documentElement.clientHeight;
var x2 = document.documentElement.scrollHeight || document.body.scrollHeight;
var y1 = document.documentElement.clientWidth || document.body.clientWidth;
var y2 = document.documentElement.scrollWidth || document.body.scrollWidth;
document.write("该网页可视区域的宽为"+y1+"px"+"<br/>"+"该网页可视区域的高为"+x1+"px"+"<br/><br/>");
document.write("该网页的尺寸宽为"+y2+"px"+"<br/>"+"该网页的尺寸高为"+x2+"px"+"<br/>");
</script>
</body>
</html>
请问为什么高度显示的是480px？？？
