clientTop 属性是 HTML DOM 中的一个属性，用于获取或设置元素的上边框宽度。这个属性返回一个整数值，表示元素上边框的宽度，单位为像素。
定义和用法
clientTop 属性用于获取或设置元素的上边框宽度。当元素的 border-top-width 设置为非 0 的值时，该属性返回的是元素上边框的实际宽度。需要注意的是，clientTop 返回的值不包括任何可能存在的滚动条宽度。
浏览器兼容性
- Chrome: 支持
- Firefox: 支持
- Safari: 支持
- Edge: 支持
- Internet Explorer: 支持（IE8及以上版本）
语法
const borderTopWidth = element.clientTop;
或者
element.clientTop = borderTopWidth;
实例
以下是一个简单的例子，演示如何使用 clientTop 属性来获取元素的上边框宽度：
-- -------------------- ---- -------
--------- -----
------
------
-------
-------- -
------- --- ----- ------
------ ------
------- ------
-
--------
-------
------
---- ---------- ------------------------------
--------
----- ---------- - ---------------------------------
------------------- - - -------------------- - ------
---------
-------
-------在这个例子中，我们创建了一个带有边框的 div 元素，并通过 JavaScript 获取了其上边框的宽度。根据上面的 CSS 样式，我们知道边框宽度为 5px，因此控制台将输出 5px。
注意事项
- 如果元素没有设置边框样式，则
clientTop返回0。 clientTop返回的值不包括滚动条的宽度。- 对于那些没有边框的元素，
clientTop的值始终为0。
应用场景
clientTop 属性可以用于在某些需要精确控制布局和间距的场景下进行计算。例如，在动态调整元素位置或大小时，可以利用 clientTop 来确保元素之间的间距符合预期。
通过理解和使用 clientTop 属性，前端开发者可以在处理复杂的网页布局时更加得心应手，特别是在涉及边框、内边距和外边距等细节时。