Html 为什么CSS左边距和右边距会增加元素的大小？_Html_Css

Html 为什么CSS左边距和右边距会增加元素的大小？

html css

Html 为什么CSS左边距和右边距会增加元素的大小？,html,css,Html,Css,我有以下代码： *{ 框大小：边框框； } 蓝先生{ 颜色：#fff；背景颜色：蓝色；弹性：0.50%；最大宽度：50%；填充：0 15px； } 维奥莱特先生{ 颜色：#fff；背景色：蓝紫色；弹性：0.50%；最大宽度：50%；填充：0 15px； } .分区{ 背景：黑色；颜色：白色；保证金：50px自动；显示器：flex；左边距：-15px；右边距：-15px； } 克森特先生{ 宽度：60%；保证金：自动；左侧填充：15px；右侧填充：15px； }

我有以下代码：

*{
框大小：边框框；
}
蓝先生{
颜色：#fff；
背景颜色：蓝色；
弹性：0.50%；
最大宽度：50%；
填充：0 15px；
}
维奥莱特先生{
颜色：#fff；
背景色：蓝紫色；
弹性：0.50%；
最大宽度：50%；
填充：0 15px；
}
.分区{
背景：黑色；
颜色：白色；
保证金：50px自动；
显示器：flex；
左边距：-15px；
右边距：-15px；
}
克森特先生{
宽度：60%；
保证金：自动；
左侧填充：15px；
右侧填充：15px；
}


我是第一组
我是二组

以下是规范中描述如何计算块元素宽度的部分：

公式是：

在其他特性的已用值中必须包含以下约束：

'margin-left'+'边框左宽度'+'填充左'+'宽度'+'填充右'+'边框右宽度'+'边框右'=包含块的宽度

你也可以读到：

如果“宽度”设置为“自动”，则任何其他“自动”值都将变为“0”，并且“宽度”将从结果相等处跟随

因此，填充和边框为0，我们将有：

'margin-left'+'width'+'margin right'=包含块的宽度

然后

'width'=包含块的宽度-'margin left'-'margin right'

现在很清楚，如果边距为负值，元素的宽度将增加到包含块的宽度之后。

以下是说明如何计算块元素宽度的规范部分：