Margin on many inline-block elements - html

Question

I have a lot of images having inline-block display type within a fixed width div.
The images have a margin of 0 5px 5px 0 which means you get a nice table effect when you have many of them.
Unfortunately this creates a side effect where the containing div has extra space between the images and its padding at the bottom and right.
How can I fix this?
CSS
div{
padding: 10px;
max-width: 191px;
background: #ddd;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 5px 5px 0;
display: inline-block;
}
HTML
<div>
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
Fiddlesis

Answer 1

DEMO
Change your div's padding to this:
padding:10px 5px 0 10px;

Answer 2

A quick approach could be to simply justify align with margins of auto for right and left and vertical align middle:
Fiddle
div{
padding: 10px 10px 5px;
max-width: 191px;
background: #ddd;
text-align:justify;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 auto 5px auto;
vertical-align:middle;
display: inline-block;
}

Answer 3

rearrange padding for your div and set image as vertical-align:top or bottom to erase the gap under it .
div{
padding: 10px 10px 5px;
max-width: 191px;
background: #ddd;
}
img {
max-width: 30px;
min-height: 23px;
margin:0 5px 5px 0;
vertical-align:top;
display: inline-block;
}
http://jsfiddle.net/LnHDc/1/
Else dispatch margin and padding and see how to deal with white-space (code not indented, use of comment, font-size to 0 , .... ) http://jsfiddle.net/LnHDc/4 or http://jsfiddle.net/LnHDc/5 or http://jsfiddle.net/LnHDc/6 .
you have many ways to approach this, eeven floatting image .