css - 添加边框会打乱布局

Question

出于某种原因，向网格中的某些 div 添加边框会弄乱间距。

这是 jsfiddle 链接: https://jsfiddle.net/gvcuLbbc/

body{
    background-color:#f6db05;
}

#container{
  width: 100%;
  text-align: center;
}

#grid{
    align-content: center;
    width: 90%;
    margin: 0px auto;
    display: inline-block;
    margin-top: 20%;
    }

.smallcontainer{
    height:200px;
    width:28%;
    margin:2%;
    float:left;
}

.textcontainer{
    border: 1px solid black;
}

我试过增加容器的大小，但没有用。我错过了什么？

Answer 1

尝试使用 border-box 模型。首先使用它:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

fiddle :https://jsfiddle.net/uys5mm1y/