填充網格佈局/項目之間的邊距

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>