为什么边界导致div溢出容器？ [英] Why are borders causing div to overflow container?

问题描述

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

I have a section set to a fixed width and a 100% width div inside of it with a 5 pixel border.

看起来很好，但您可以告诉包含div是有点偏离中心，它不会没有边界，我需要匹配客户端组件。

Looks fine but you can tell the containing div is a bit off center and it wouldn't be without the border, which I need to match the client 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％或类似的东西，但这仍不能真正起作用。所以会有什么？

The only thing I can think of is to make the width of the .info-box to be 98% or something like that, but that's still not going to truly work. So will anything?

顺便说一句，我已经尝试添加相对定位，将显示设置为内联而不是<$ c

BTW, I already tried adding relative positioning, set display to inline instead of inline-block....none of which worked.

推荐答案

添加 box-sizing：border-box; 添加到您的信息框中 class

Add box-sizing: border-box; to your 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%;
}

方块大小在这里更好地解释 https://css-tricks.com/box-sizing/

这篇关于为什么边界导致div溢出容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！