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

您还可以阅读以下内容：

如果将“宽度”设置为“自动”，则其他所有“自动”值将变为“ 0”，并且从产生的相等性中得出“宽度”。

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

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

然后

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

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

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

1 个答案: