包括宽度和高度的边距答案

【问题标题】：Including margin for width and height包括宽度和高度的边距
【发布时间】：2013-01-19 17:03:40
【问题描述】：

我希望框的宽度和高度默认包含所有内容、内边距、边框宽度和边距。有没有办法做到这一点？特别是，我希望能够指定诸如 width: 100% 之类的内容，包括到边距的所有内容。

【问题讨论】：

无框大小值包括边距大小。 border-box 包括除边距之外的所有内容：宽度和高度属性包括内边距和边框，但不包括边距。这是文档处于 Quirks 模式时 Internet Explorer 使用的盒子模型。
您试图尽可能地包含宽度/高度，padding-box 仅包括填充大小，border-box 包括填充和边框，因此border-box 更接近您的要求.
@AlecTMH 好的。我以错误的方式解释padding-box。你是对的。
这对我帮助很大，盒子大小是 boxwidth+padding+border（但不是边距）：在 CSS 中插入：*、*:before、*:after {-moz-box-sizing :border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
我认为如果您使用的是 DIV。默认情况下， display:block 元素将包含容器中的所有内容。你能准确地说出你想在哪里使用吗？

标签： css

【解决方案1】：

这是一个模糊的问题，但我会尽力回答。

边距，顾名思义，就是框外的区域；这意味着没有办法在你的 div 中包含边距。

如果您想在盒子内部添加更多填充，但又不希望盒子调整大小，请使用：box-sizing:content-box;
或者，如果您想包含填充和边框，请使用：box-sizing:border-box;

保留 div 大小并消除溢出的可行解决方案如下所示：

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

只需将要设置边距的 div 放在另一个具有填充的 div 内。从而产生假边距。

【讨论】：

是的，添加另一个 DIV 可能是完成此操作的唯一方法。如果所需的宽度设置为外部元素，您仍然可以使用 margin 作为内部元素（如果使用边框并设置 width: 100%，则可能需要 box-sizing: border-box）。
当你想要干净的代码，许多 div 排成一行，每个都有背景图片时，这是个问题。您想要一些特定的差距，唯一的解决方案是 flex 或将其包装在另一个 div 中，在我看来这应该是绝对没有必要的

【解决方案2】：

如果你的边距例如 10px 你可以使用

width: calc(100% - 20px);
box-sizing: border-box;

browser support

w3schools.com reference

【讨论】：

你可以为任何大小的边距做width: calc(100% - 0);

【解决方案3】：

将 CSS box-sizing 属性设置为 border-box 以使 width 和 height 包含内容、边框和填充。这允许您设置width: 100% 并仍然添加padding 或border。换句话说，box-sizing: border-box 使width 包含边距内边缘之间的所有内容。没有办法以这种方式包含边距本身。

.example { box-sizing: border-box; width: 100%; padding: 10px }

有用的参考资料

【讨论】：

border-box 在我的情况下似乎没有帮助，当我将它应用于 body 元素以尝试允许 height: 100vh 将 body 设置为没有滚动条的页面时。滚动条仍然出现。
不知道为什么这被否决，这似乎是解决问题的最明智的方法。

【解决方案4】：

也许在它周围包裹另一个 div 并指定该 div 的宽度？

<div style="width: 100px; border: 1px solid blue;">
<div style="width: 100px; background:yellow; margin: 10px; border: 1px solid blue">
inner width 100px not including it's margin.
</div>
</div>

<div style="width: 100px; border: 1px solid blue">
<div style="background:yellow; margin: 10px; border: 1px solid blue">
  inner width's 100px including it's margin.
</div>
</div>

【讨论】：

【解决方案5】：

使用display: flex; 作为父标签。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

【讨论】：

如果您可以通过 HTML 将内容显式拆分为行，则效果很好