html - 实际宽度是多少？

Question

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

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

有什么想法吗？

提前致谢

Answer 1

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

所以在你的例子中

150 像素 内部内容 宽度 + 6 像素的填充(左右 3 像素)加上 8 像素的边框(左右 4 像素)= 164 像素。

默认的 box-sizing 设置是 content-box

content-box .This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {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>