html - 元素之间具有填充/边距的网格布局

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>