如何使用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>