奇怪的进度条行为offsetwidth

Question

我开始使用vanilla JavaScript开发一个简单的进度条。至于获取CSS中设置的宽度，我发现使用JS的唯一方法是使用.offsetWidth - 以下是我开始设置的功能演示的代码。小提琴链接位于问题的底部。

HTML：

<section id="box"></section>
<p>
<section id="box2"></section>

CSS：

#box, #box2 {
height: 10px;
width: 5px;
background-color: lightBlue;
}
#box2 {
width: 4px;
}

JavaScript（onload）：

var savedwidth = document.getElementById("box").offsetWidth;
alert("box 1 width " + savedwidth);
savedwidth = document.getElementById("box2").offsetWidth;
alert("box 2 width " + savedwidth);

在测试它以确定它是否准确抓住属性时，我注意到当宽度设置为5px时它返回6px。其他一切似乎都很好。 4px = 4px，6px = 6px。

如果有人知道为什么会这样，我很好奇吗？它足够小，它不会影响我似乎想要做的事情，但你知道的越多，你就越好。

FIDDLE：http://jsfiddle.net/5yk9e5du/