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

Question

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

看起来不错，但你可以看出包含的 div 有点偏离中心，它不会没有边框，我需要匹配客户端 comp。

代码相当简单：

#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....这些都不起作用。

Answer 1

将box-sizing: border-box; 添加到您的info-box 类中

.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/