CSS将外部边框替换为INTERNAL边框

Question

是否有任何技巧可以使css边界内部而非外部。 例如，在这种情况下，盒子大小等于303px（而不是我想要的300px）。 我不想将宽度设置为300px-3px = 297px; 我想知道是否有快速解决方案而不操纵宽度高度。

html：

<div class="a"></div>

css：

div {
width: 300px;
height: 300px;
}
div.a {
border: 3px solid red;
}

jsFiddle：）

http://jsfiddle.net/nFLeG/1/

谢谢！

Answer 1

是的，您可以使用：

box-sizing: border-box

我已经更新了您的小提琴，因此您可以查看它 http://jsfiddle.net/nFLeG/2/

您可以在here上阅读有关框尺寸的更多信息。

Answer 2

是的，您可以使用box-sizing来执行此操作。

#someElement {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

小提琴：demo

Read more about box-sizing