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

演示: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>