为什么边框会导致 div 溢出容器？

我有一个部分设置为固定宽度，其内部有一个 100% 宽度的 div，边框为 5 像素。

看起来不错，但您可以看出包含的 div 有点偏离中心，而且它不会没有边框，我需要将其与客户端组件相匹配。

代码相当简单：

#info {
  max-width: 980px;
  margin: 0 auto;
}
.info-box {
  border: 5px solid #0033A0;
  display: inline-block;
  text-align: center;
  padding: 48px 0;
  width: 100%;
}

<section id="info">
  <div class="info-box">SOME CONTENT</div>
</section>

我唯一能想到的就是使宽度.info-box达到 98% 或类似的值，但这仍然无法真正发挥作用。那么会有什么吗？

顺便说一句，我已经尝试添加相对定位，将显示设置为inline代替inline-block....没有一个起作用。

Add box-sizing: border-box;给你的info-box class

.info-box {
    background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0;
    border: 5px solid #0033a0;
    box-sizing: border-box;
    display: inline-block;
    padding: 48px 0;
    text-align: center;
    width: 100%;
}

box-sizing这里有更好的解释https://css-tricks.com/box-sizing/