我的理解是，
元素的宽度=（左边框宽度+左填充宽度+内容宽度+右填充宽度+右边框宽度）
元素的高度 =（顶部边框高度 + 顶部填充高度 + 内容高度 + 底部填充高度 + 底部边框高度）
下面是相同的图表。
元素的宽度 = (10+10+140+10+10) = 180
元素的高度 = (10+10+150+10+10) = 190
margin 不包含在元素的大小中。
content & padding 仅包含在点击区域中。
上述公式在计算html元素的width和height时是否正确？
【问题讨论】：
听起来你描述的是一个元素的offsetWidth和offsetHeight，它返回元素的“布局宽度和高度”，即所有计算后的最终宽度。
HTMLElement.offsetWidth 只读属性返回元素的布局宽度。通常，元素的 offsetWidth 是一个测量值，包括元素边框、元素水平填充、元素垂直滚动条（如果存在，如果呈现）和元素 CSS 宽度。
所以要回答您的问题，元素的最终布局宽度通常是元素的边框、水平内边距、垂直滚动条宽度和内容宽度的总和。
最终的布局高度 (offsetHeight) 将相似。
【讨论】：
CSS 计算height 和width 的方式并不像看起来那么简单明了。
最直接的回答你的问题...
如何计算元素的宽度和高度？
...是：这取决于使用的盒子的类型。
根据CSS Visual Formatting Model：
10.3 Calculating widths and margins
元素的
width、margin-left、margin-right的值， 用于布局的left和right属性取决于 框生成并相互对... 以下情况需要 尊敬的：
- 内联、不可替换的元素
- 内联、替换元素
- 正常流程中的块级、非替换元素
- 块级，正常流程中的替换元素
- 浮动的、不可替换的元素
- 浮动、替换元素
- 绝对定位、不可替换的元素
- 绝对定位，替换元素
inline-block，正常流程中的非替换元素inline-block，替换正常流程中的元素
10.6 Calculating heights and margins
为了计算
top、margin-top、height、margin-bottom和bottom的值，必须区分各种框：与上面相同的列表
我实际上希望通过列出构成至少一些框类型的宽度和高度的变量来创建一个简单的参考指南。所以我从块级开始，发现计算宽度，一般来说，很容易：
containing block width = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
但是，当我到达高度时，我发现了这个：
10.6.3 Block-level non-replaced elements in normal flow when
overflowcomputes tovisible本节也适用于块级非替换元素 当
overflow没有计算到visible但已经 传播到视口。如果
margin-top或margin-bottom是auto，则它们的使用值为0。 如果height是auto，则高度取决于元素是否有 任何块级子级以及它是否有填充或边框：元素的高度是从其顶部内容边缘到 以下第一个适用：
- 最后一行框的底部边缘，如果该框建立了包含一行或多行的内联格式设置上下文
- 其最后一个流入子项的底部（可能已折叠）边距的底部边缘，如果子项的底部边距未折叠 与元素的下边距
- 上边距不与元素下边距折叠的最后一个流入子项的下边框边缘
- 为零，否则
只考虑正常流程中的孩子（即， 浮动框和绝对定位框被忽略，并且 相对定位的盒子被认为没有它们的偏移量）。笔记 子框可能是匿名块框。
计算高度时需要考虑很多因素。
有关用于确定 HTML 元素的宽度或高度的计算的准确和具体解读，请参阅CSS Visual Formatting Model。要了解元素的确切高度或宽度，请参阅开发者工具中的计算值选项卡。
【讨论】：
width CSS 属性指定元素内容区域的宽度。内容区域位于元素的内边距、边框和边距内。
https://developer.mozilla.org/en-US/docs/Web/CSS/width
此页面更详细地解释了盒子模型：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
【讨论】：