html - how to get responsive equal borders with imgs? -

this tried, borders not equal.

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

and 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/

or maybe approach bad

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>