盒子模型计算是不是包括保证金？

Posted 2023-03-05

【中文标题】盒子模型计算是不是包括保证金？

【英文标题】：Does Box Model calculation include margin or not?盒子模型计算是否包括保证金？

【发布时间】：2017-02-27 01:42:41

【问题描述】：

当我查看我创建的框的实际宽度和实际高度时，尺寸由我在计算中一直知道的内容确认：

宽度 = 边框 + 内边距 + 内容宽度 高度 = 边框 + 内边距 + 内容高度

但是在 w3.org 上它说： 框宽度由左右边距、边框和内边距以及内容宽度之和给出。高度由顶部和底部边距、边框和内边距以及内容高度的总和给出。

那是什么？我知道边距对盒子模型很重要，但它不会影响盒子的大小。

div 
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;



/*200px + 2px + 10px = 212px */

<div></div>

【问题讨论】：

这个答案可能有助于阐明它是如何工作的：***.com/a/39585516/3597276

您可以使用box-sizing css 属性更改框尺寸计算行为。

This answer 可能会帮助您在 border-box 和 content-box 属性之间做出决定。

【参考方案1】：

“盒子模型”是@K.Daniek 上面描述的。但是，我的印象是您想知道所有这些参数中的哪些包含在定义的宽度中。这取决于使用的box-sizing：

默认是content-box：这里所有的东西加起来：宽度加上边框加上填充构成了盒子的可见外部宽度（如果它被边框和/或背景）。边距是额外的 - 到父元素的外部距离。 （有特殊情况折叠边距，这是一个额外的东西）所以给定的宽度不包含其他内容。

使用border-box，给定的宽度包括边框和内边距。同样，边距是额外的/外部的。

使用padding-box，给定的宽度包括只包括内边距，不包括边框。再一次，边距是额外的/外部的，它们总是（相对于定义的width）。

另请参阅下面的示例，它们都具有相同的宽度、边框、填充和边距设置，但三种不同的box-sizing 可能性：

body 
    background: #fc7;
    margin: 0;

#x /*200px + 2px border + 10px padding = 212px width plus margins */
    box-sizing: content-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #7fc;

#y /*200px = 200px width plus margins */
    box-sizing: border-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #f6f;

#z /*200px + 2px border = 202px width plus margins */
    box-sizing: padding-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #cf9;

<div id="x">content-box</div>
<div id="y">border-box</div>
<div id="z">padding-box</div>

【讨论】：

谢谢。我被 CSS-Tricks 声明所迷惑：“边距的独特之处在于它不会影响盒子本身的大小，但它会影响与盒子交互的其他内容，因此它是 CSS 盒子模型的重要组成部分"和盒子模型的w3定义。所以是的！我明白你对 box-sizing 的意思，这就是我的问题的意图：定义的宽度中包含的参数。所以你展示的是我熟悉的东西。也就是说，边距包含在盒子模型中，但计算中实际定义的宽度不会包含边距？

具体来说，当我使用开发工具并单击 div 时，它会显示 212px 的宽度，它跟在您上面的内容框后面，因此没有计算边距。所以我认为你对我的困惑的印象是正确的。

这是我的想法，也是我需要习惯的。这就是经常有一个一般规则的原因 `* box-sizing: border-box; 适用于 所有 元素。

【参考方案2】：

是的，盒子模型包括边距。盒子模型代表构成正文文档的四个边缘：ma​​rgin area、border area、padding area和content area。我的帖子底部的图片可能对您有所帮助。

内边距区域延伸到内边距周围的边框。当内容区域设置了背景、颜色或图像时，这将延伸到 padding 中，这就是为什么您可以将 padding 视为扩展内容的原因。 padding 位于 padding 边缘内，其尺寸为 padding-box 宽度和 padding-box 高度。

padding 和内容边缘之间的空间可以使用 padding-top、padding-right、padding-bottom、padding-left 和简写的 padding CSS 属性来控制。

边框区域将填充区域扩展到包含边框的区域。它是边框边缘内的区域，其尺寸是边框宽度和边框高度。 此区域取决于由border-width 属性或简写边框定义的边框大小。

ma​​rgin area 用一个空白区域扩展边界区域，用于将元素与其相邻元素分开。 它是margin边缘内的区域，它的尺寸是margin-box宽度和margin-box高度。

如果您不想包含边距区域，您可以使用box-sizing 属性。

box-sizing: border-box 将导致盒子模型仅使用

内容、填充和边框区域

。 box-sizing: content-box 将仅计算

内容区域

，不包括

内边距、边框和边距区域

。 box-sizing: padding-box 将仅使用

内容和填充区域

。

来源：https://css-tricks.com/the-css-box-model/

【讨论】：

那个 CSS-tricks 链接把我带到了这里，特别是这句话：“Margin 的独特之处在于它不会影响盒子本身的大小，但它会影响与之交互的其他内容盒子，因此也是 CSS 盒子模型的重要组成部分。”当我单击我创建的 div 时，它会显示 212px 的宽度，如我上面的代码所示。它正在添加宽度 + padding-left + padding-right +border-left +border-right。我没有看到保证金在那里。我知道它在盒子模型中很重要，但就计算而言，这让我很反感。

:( 我选择了另一个，因为我的问题的意图正如他提到的那样，“参数包含在定义的宽度中。”我知道边距在盒子模型中，但我的困惑是什么时候我使用开发工具并单击该元素，它显示总宽度为 212 像素；这并没有添加边距。我正在查看计算。您链接的文章以及 w3.org 是让我来到这里的原因第一名，特别是 Coyier 写的这句话：

“边距的独特之处在于它不会影响盒子本身的大小，但它会影响与盒子交互的其他内容，因此是 CSS 盒子模型的重要组成部分”和然后是它下面的计算本身。你的回答很好，但没有针对我的具体情况。希望能澄清我的意图:)

另外，我不知道你提到的“如果你不想包含边距区域，你可以使用 box-sizing 属性”是什么意思。我从来没有将内容框指定为默认值，但它仍然给了我 212px 而不是添加的边距。我还在学习，所以我不确定如何渲染一个包含边距计算的框。仍在学习中，感谢您的帮助。

【参考方案3】：

边距影响宽度

一个元素的总宽度=width + left padding + right padding + 左边框 + 右边框 + 左边距 + 右边距

元素的总高度= 高度 + 上边距 + 下边距 + 上边框 + 下边框 + 上边距 + 下边距

这里会

width=200px+5px(padding-left)+5px(right padding)+2px(margin left)+2px(margin right)+ 1px(border-left)+1px(border-right)=216px。

查看此链接http://learn.shayhowe.com/html-css/opening-the-box-model/

希望对你有帮助

检查这段代码 sn-p，它使用 javascript 显示 div 的总宽度

$(document).ready(function()
  alert($("#div1").outerWidth(true));
);

div 
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">hello</div>

【讨论】：

感谢@Geeky。仍在学习并将阅读发送给我的链接。虽然我可以看到边距对盒子模型很重要，但我想知道的是，当我打开开发工具并单击我的盒子元素时，它会显示 212 像素而不是 216 像素的宽度。正如所呈现的宽度不是在边距中计算的那样。这是我在这里想的困惑。我希望我说得通。

【参考方案4】：

如果您查看代码 sn-p ，我有 3 个 div 一个没有 box-sizing 属性，一个具有 box-sizing 作为边框框，第三个具有内容框。

根据 offsetWidth 上的MDN，它是内容+边框+填充的总和，但不是边距。

所以，当 box-sizing 被指定为 border-box 时，内容宽度会自动缩小以共享其值用于填充和边框。在给定的示例中，使用 box-sizing : border-box 和宽度为 200px，内容水平长度（宽度）减少到 188px 以使内容 + 填充 + 边框为 200px。 使用 content-box，padding 和 margin 被额外添加到内容宽度 200，因此我们看到宽度为 212px。

基本上不指定box-sizing时，box-sizing的默认值是inherits，就是content-box。

因此，宽度计算主要取决于 box-sizing 属性。 offsetWidth 总是 content + padding + margin，唯一不同的是基于 box-sizing 属性的内容宽度。

console.log("Inherit Width: " + document.querySelector(".content-div-inherit").offsetWidth + " - $ Width : " + $(".content-div-inherit").width());

console.log("Border Box Width: " + document.querySelector(".content-div-border-box").offsetWidth + " - $ Width : " + $(".content-div-border-box").width());

console.log("Content Box Width: " + document.querySelector(".content-div-content-box").offsetWidth + " - $ Width : " + $(".content-div-content-box").width());

.content-div-inherit 
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;

.content-div-border-box 
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: border-box;

.content-div-content-box 
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: content-box;

.container 
  border: 1px solid red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content-div-inherit">This element Inherits box sizing Property</div>

  <div class="content-div-border-box">This element has Border Box</div>

  <div class="content-div-content-box">This element has Content Box</div>
</div>