无法在我指定宽度的元素之外创建边框

Question

我的网页内容为960px宽。其中的一个容器（#element，见下文）必须具有半透明边框，使页面背景略微可见。

#element {
    width: 950px;
    border: 5px solid rgba(0,0,0,0.2);
}

#element及其边框应为960px宽，其边框为半透明，使页面背景可见。相反，它的边框为“内部”为950px，不会让页面背景显示在下面，而是#element本身。

为什么？

Answer 1

查看box-sizing CSS属性： http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

尝试指定您要包含内容，填充和边框（默认情况下box-sizing仅包含内容），如下所示：

#element {
    box-sizing: content-box
    width: 950px;
    border: 5px solid rgba(0,0,0,0.2);
}

Answer 2

Danield是对的，看看这个jsfiddle：http://jsfiddle.net/5cetxj6t/3/

某些CSS重置可能会设置

*{
  box-sizing: border-box;
}

默认