为什么边框会增加元素的宽度？

Question

我有一个如下所示的

元素。它指定的宽度为300像素，并且边框宽度为2像素。 为什么2像素的边框会导致

元素的宽度变成304像素？如果我想要它有边框但仍然是300像素宽，该怎么办？

.test {
  width: 300px;
  height: auto;
  border: 2px solid black;
}

<div class="test">
</div>

- Kaveh

Answer 1

您所发现的是 CSS 盒模型的基础。

您可以使用 box-sizing 属性进行调整，它有两个可能的值：

1. content-box（默认）
2. border-box

content-box 默认。宽度和高度属性（以及最小/最大属性）仅包括内容。边框、填充或外边距未包含在内

border-box 宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，但不包括外边距

(来源: W3Schools.com)

默认情况下，边框会添加到容器的宽度/高度之上。

看一下当您使用 border-box 时会发生什么：

.test {
  width: 300px;
  height: auto;
  border: 2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

这将确保宽度保持不变，包括盒子边框。

- kukkuz

---

谢谢您的帮助，很好。 - Kaveh

Answer 2

由于边框包围了

的所有侧面，因此它既在左侧又在右侧。您必须将边框的宽度计算两次。因此，

的最终宽度将为300 + 2 * 2 = 304px。

- Kewin Dousse

---

谢谢，所以如果我想保持带有边框的div为300px，则宽度必须设置为296px吗？ - Kaveh

Answer 3

如果你想在不增加元素宽度的情况下让边框出现在四个方向，你可以使用 outline 来代替：

.test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    outline:2px solid black;
}

<div class="test">Test</div>

您也可以使用一个内嵌的box-shadow：

 .test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    box-shadow:0 0 0 2px black inset;
}

<div class="test">Test</div>

- APAD1

Answer 4

正确简洁的答案是 box-sizing: border-box; 将其添加到你的类测试中，问题就解决了。

- SimonSolutions

Answer 5

2px的边框不会导致div的宽度为302px。

当您设置元素的宽度时，您正在设置元素的内容区域。但是，您所指的是外部宽度，即宽度+填充+边框。

要了解差异，请查看此处的框模型如何工作：https://developer.mozilla.org/en-US/docs/Web/CSS/width 以及这些链接。

宽度：http://api.jquery.com/width/ 内部宽度：http://api.jquery.com/innerwidth/ 外部宽度：http://api.jquery.com/outerwidth/ 祝愉快编码！

- Isabel Inc

Answer 6

在CSS 2中，你必须将div包裹在另一个元素内（请注意不要为内部元素设置width:100%，让它自动扩展）：

var width=$("#test").width();
$("#result").html('Javascript says: The inner Width of element is '+width);

#wrapper{
  width:300px;
}
#test{
  border:2px solid #000000;
}

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

<div id="wrapper">
   <div id="test">&nbsp;</div>
</div>

<br>
<div id="result"></div>

在CSS 3中使用box-sizing：

#test{
  width:300px;
  border:2px solid #000000;
  box-sizing:boder-box;
    }

<div id="test">&nbsp;</div>

- Ali Sheikhpour