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

Question

我有以下代码：

* {
box-sizing: border-box;
}
.blue {
color: #fff;
background-color: blue;
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
.violet {
color: #fff;
background-color: blueviolet;
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
.div {
background: black;
color: white;
margin: 50px auto;
display: flex;
margin-left: -15px;
margin-right: -15px;
}
.xont {
width: 60%;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}

<div class="xont">
<div class="div">
<div class="violet">This is div 1</div>
<div class="blue">This is div 2</div>
</div>
</div>

为什么当我将左右的负边距设置为 -15px 时，.div元素的宽度增加了 30px？

Answer 1

以下是描述如何计算块元素宽度的规范部分： https://www.w3.org/TR/CSS21/visudet.html#blockwidth。

公式为：

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

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

您还可以阅读：

如果"width">

设置为"auto"，则任何其他"auto"值将变为"0"，"width"遵循结果的相等性。

所以填充和边框我们是 0，我们将有：

'margin-left' + 'width' + 'margin-right' = width of containing block

然后

'width' = width of containing block - 'margin-left' - 'margin-right'

现在很明显，如果边距为负，元素的宽度将超过包含块的宽度。