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

Question

我将一个部分设置为固定宽度和 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...none 有效。

Answer 1

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

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

Why are borders causing div to overflow container?

html

css

border

display