【问题标题】: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,它是有道理的。您的解决方案也有效。谢谢。
猜你喜欢
  • 2015-07-19
  • 2012-10-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多