расположение сетки с отступом/разностью между элементами

Question

Как добавить пробелы (отступы) между элементами на макете сетки? Я попытался добавить padding в 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>