这是 box-sizing 的预期行为：“border-box”吗？ [复制]

【问题标题】：Is this the expected behaviour of box-sizing: "border-box"? [duplicate]这是 box-sizing 的预期行为：“border-box”吗？ [复制]
【发布时间】：2020-07-28 03:53:14
【问题描述】：

我有以下 div 和按钮

<div class="sc-fzqBZW fNBJAV">
  <button class="sc-fzokOt eEeKDq">Cancel</button>
  <button class="sc-fzokOt eEeKDq">Continue</button>
</div>

div的css如下

box-sizing: "border-box"

按钮是

width: "50%";
padding: "10px";
margin: "5px";

但是，由于添加了边距，按钮会中断到下一行。我认为边界框会解决这个问题，但我不知道为什么不是。我在这里想念什么？

【问题讨论】：

是的。保证金从来都不是盒子模型的一部分。它被认为是元素的外部。

标签： html css

【解决方案1】：

见MDN:

border-box 告诉浏览器在您为元素的宽度和高度指定的值中考虑任何 border 和 padding。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常可以更轻松地调整元素的大小。

它不将边距放在框内。

请考虑使用 flexbox。

div {
  display: flex;
}

button {
  flex: 1 1 auto;
  margin: 5px;
}

<div>
  <button>Cancel</button>
  <button>Continue</button>
</div>

【讨论】：

当然。我看过 MDN，它是有道理的。您的解决方案也有效。谢谢。