添加邊框佈局佈局

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/