Question

我的截面设置为固定宽度，内部有100％宽度div，边框为5像素。

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

代码非常简单：

＆＃13;

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

＆＃13;

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

＆＃13;

我唯一能想到的是.info-box的宽度为98％或类似的东西，但这仍然无法真正发挥作用。那会是什么？

BTW，我已经尝试添加相对定位，将显示设置为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/

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

1 个答案: