添加边框布局布局

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; 
} 

小提琴：https://jsfiddle.net/uys5mm1y/