css - Why random margins between HTML Div tags -

i trying fill data in div tag using angularjs loop.

<div>     <div class='box' ng-repeat="product in products | filter:{'scid': scid.tostring()}:true | orderby:'pname'">         <br>         <b>{{product.bname}}  </b>         <br>{{ product.pname }}         <br>         <img src="http://localhost/{{ product.image_path }}" alt="" border=3 height=75 width=75></img>      </div> </div> 

this css class.

.box { margin : 5px; display : inline-block; width: 150px; height: 250px; background-color: grey; text-align:center; } 

but not rendering properly. (some random margin top , bottom)

can doing wrong??

add

vertical-align: top; 

to css