<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: absolute;
border: 20px solid red;
margin: 10px 0px 0px 0px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
/*style
* top
* left
* right
* bottom
* client
* clientTop 内容区域到边框顶部的距离
* clientLeft 内容区域到边框左部的距离
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
* */
var oBox = document.getElementsByClassName(‘box‘)[0];
console.log(oBox.clientTop)
console.log(oBox.clientLeft)
console.log(oBox.clientWidth)
console.log(oBox.clientHeight)
</script>
</html>
原文：https://www.cnblogs.com/beallaliu/p/9349051.html