如何獲得響應與imgs相等的邊界？

Question

這是我試過的，但邊界不相等。

.foo{ 
    width: 100%; 
    height: 100%; 
    background: #999; 
    padding-left: 2%; 
    padding-top: 2%; 
} 
img{ 
    width: 47%; 
    margin-top: 0; 
    margin-bottom: 2%; 
    margin-right: 2%; 
    padding: 0; 
} 

和HTML：

<div class="foo"> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
</div> 

http://jsfiddle.net/07Lwwmgb/

也許我的做法是不好的

Answer 1

DEMO：http://jsfiddle.net/n64vaahu/

CSS

body { 
    margin: 0; 
    padding: 0; 
} 
.foo { 
    width: 100%; 
    height: 100%; 
    background: #999; 
    box-sizing: border-box; 
    padding: .5%; 
} 
img { 
    width: 50%; 
    float: left; 
    padding: .5%; 
    box-sizing: border-box; 
} 
.clear { 
    clear: both 
} 

HTML

<div class="foo"> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""> 
     <div class="clear"></div> 
</div>