在确定元素的宽度或高度时，我们是否在css框模型中包含边距

Question

事实上，当我在这些网站上读到两种不同的东西时，我感到困惑。我知道框的大小和它如何影响框模型，但如果我们不考虑大小和想要告诉元素的大小。请参阅以下URL：

http://www.w3schools.com/css/css_boxmodel.asp

元素的总宽度应该这样计算：

元素总宽度=宽度+左填充+右填充+左边框+右边框+左边框+右边框+左边框+右边框

元素的总高度应该这样计算：

元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

https://css-tricks.com/the-css-box-model/

盒子本身的大小是这样计算的：

宽度=宽度+填充-左侧+填充-右侧+边框-左侧+边框-右侧高度=高度+填充-顶部+填充-底部+边框-顶部+边框-底部

我认为根据我的理解，我们计算宽度=宽度+填充+边框作为缺省框大小中元素的总宽度。

Answer 1

下面是我在Chrome中大致观察到的情况。

如果设置*{box-sizing：border-box；}，则元素的宽度等于width+border+padding。width值与devtool中显示的width相当。

元素宽度（当然）包括其子元素的边距，但不包括它自己的边距。width值也等同于devtool中显示的width。但计算时需要注意边距收缩。

但是，如果对于exmaple，最顶部元素的margin-top折叠，呈现出body之外，那么额外的magin不会增加devtool中显示的框的元素高度。但是可以使用document.getElementsByTagName('html')[0].ScrollHeight获取整个高度。

回到你的问题：

在确定元素的宽度或高度时，我们是否在css框模型中包含边距？

我通常会说是的。

同样，使用boder-box，元素的width==content-width（包括元素子项的边距）+border+padding。