Alinee las imágenes sin espaciado horizontal y literalmente

Tengo un grupo de 4 imágenes que trato de alinear vertical y horizontalmente.

El problema:

No puedo viajar de un pequeño espacio vertical entre ellos.

Por favor revisa el problema reproducido en Fiddle

html:

css:

 * {margin:0; padding: 0;} div {width: 200px; height: 200px;} ul { list-style:none; } ul li { display: inline-block; float:left; } 

Parece bastante simple, pero no he podido obtener el espaciado de distancia, aparte de especificar manualmente la altura a 100px , que no responde y por lo tanto no es viable.

Agregar vertical-align:top en los elementos img eliminará el espacio. El valor predeterminado es baseline .

Como nota al margen, el trabajo de bottom y el middle también.

Ejemplo jsFiddle

 img { vertical-align:top; } 

Agregar display:block de los elementos img también funciona. (ejemplo)

 img { display:block; } 

Pruebe margin: 0 auto; borde: 0px;

Si no tienes texto en esto, solo puedes decir

 ul { font-size: 0; } 

Esto elimina el espacio, ver JSFiddle modificado