项目之间具有 padding/margin 的网格布局

Question

如何在网格布局的项目之间添加空格（填充）？我尝试将填充添加到 div 但空格不相等。

div{
   width:calc(100% / 3);
  padding:10px;
box-sizing:border-box;
    float:left;
    
}

img{
    width:100%;
    border:1px solid;
    display:block;
}

body{
    margin:0;
    padding:0;
}

<div><img src="http://placehold.it/200x200"/></div>
<div><img src="http://placehold.it/200x200"/></div>
<div><img src="http://placehold.it/200x200"/></div>
<div><img src="http://placehold.it/200x200"/></div>
<div><img src="http://placehold.it/200x200"/></div>
<div><img src="http://placehold.it/200x200"/></div>

Answer 1

 

  div{
   padding:5px;
   box-sizing:border-box;
   overflow:hidden;
  }

  div > div{
      width:calc(100% / 3);
      float:left;   
    }

img{
    width:100%;
    border:1px solid;
    display:block;
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
}

<div>
    <div><img src="http://placehold.it/200x200"/></div>
    <div><img src="http://placehold.it/200x200"/></div>
    <div><img src="http://placehold.it/200x200"/></div>
    <div><img src="http://placehold.it/200x200"/></div>
    <div><img src="http://placehold.it/200x200"/></div>
    <div><img src="http://placehold.it/200x200"/></div>
</div>

项目之间具有 padding/margin 的网格布局

grid layout with padding/margin between items

html

css

grid