Question

Este es el CSS:

.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;
}

y el 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/

o talvez podrian darme otro enfoque para realizarlo.

Answer 1

a mi me funciono bien asi:

body{
    margin: 0;
    padding: 0; 
}
.foo{
    float: left;
    width: 100%;
    height: 100%;
    background: #999;
    padding: 2% 2% 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
img{
    float: left;
    width: 49%;
    border: none;
    margin-right: 0%;
    margin-bottom: 2%;
}

img:nth-child(2n + 1){
    margin-right: 2%;
}

Answer 2

Como solución podrías hacer algo como esto:

.foo{
    width: 100%;
    height: 100%;
    background: #999;
    padding-bottom:2.4%;
}

img{
    width: 46%;
    margin-top:2.4%;
    margin-left: 2.4%;
    padding: 0;
}

Pero para sacarlo exacto, tienes que sacar los decimales en el porcentaje, por ejemplo 2.333333% y así ya te quedaría al milímetro si tomas en cuenta el margen del lado izquierdo, su porcentaje y lo que tiene que sobrar a la derecha para cumplir el 100%.

Saludos.