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/

添加边框混乱布局

1 个答案: