实际宽度是多少？答案

【问题标题】：How much is the actual width?实际宽度是多少？
【发布时间】：2015-05-25 01:50:18
【问题描述】：

问题是 ->> 一个 html 元素有这些样式 width: 150px;填充：3px；边框：4px；边距：7px；实际宽度是多少...

我不明白这个问题，因为据说宽度是 150 像素.. 那他们为什么要问这个？

有什么想法吗？

提前致谢

【问题讨论】：

我会说，154px 是实际宽度，因为边框将 4px 添加到 150px 但填充和边距不会与元素的实际宽度有所不同。
取决于您在 real width 下定义的内容以及您将 box-sizing 设置为的内容。
我的一个朋友说在这种情况下实际宽度是 156，因为 width += 2*padding
@codeAddicted — 正如 Bram 所说，这取决于“真实”的含义（以及各种其他属性的值，例如 display）。
@RichardMacarthy 你错了，没有box-sizing 声明padding 确实像边框一样增加宽度.. - 见 - jsfiddle.net/mzwhm6x2/1

标签： html css

【解决方案1】：

没有box-sizing 声明填充确实会像边框一样增加宽度..

所以在你的例子中

150px 内部内容 宽度 + 6px 的内边距（左右 3px）加 8px 的边框（左右 4px）= 164px。

默认的盒子大小设置是content-box

内容框 . 这是 CSS 标准指定的默认样式。测量宽度和高度属性仅包括内容，但不包括填充、边框或边距。注意：填充、边框和边距将在框外，例如IF .box {宽度：350px};然后你应用 {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}

MDN reference

div {
  width: 150px;
  height: 25px;
  margin: 7px;
  border: 4px solid red;
  padding: 3px;
  background:lightblue;
}
.nopadding {
  padding: 0;
  border-color:green;
}
.box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-color:rebeccapurple;
}

<div></div>

<div class="nopadding"></div>

<div class="box"></div>

【讨论】：

soo，你是说我们的计算中不包括保证金？
不...边距将元素分开...它们不会增加宽度。
那为什么这里说我们也计算保证金 ->> w3schools.com/css/css_boxmodel.asp