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

Question

事实上，当我在这些网站上读到两件不同的东西时，我感到很困惑。我知道盒子的大小和它对盒子模型的影响，但是如果我们不考虑尺寸，并且想知道元素的大小会怎样呢？请参阅网址如下：

boxmodel.asp

元素的总宽度应按以下方式计算： 总元素宽度=宽度+左填充+右填充+左边框+右边框+左边框+右边框 元素的总高度应按以下方式计算： 总元素高度=高度+顶部填充+底部填充+顶部边框+底部边框+上边缘+底部边缘

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

盒子本身的大小计算如下： Width=宽度+填充-左+填充-右+左+边框-右Height=高度+填充-顶+填充-底部+边框-顶部+边框-底部

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

Answer 1

这是我在Chrome中粗略观察到的。

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

元素的宽度(当然)包括它的子区域，但不包括它自己的边距。宽度值也相当于devtool中显示的宽度。但在计算时，你需要关心的是保证金崩溃。

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

所以回到你的问题：

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

我会说是的。

同样，对于boder-box，元素的width == content-width(include margin of element's children) + border + padding。