CSS display:table-cell loses margin property

Question

I have a css class which works perfectly:

.img_holder { width:126px; height:126px; border:1px solid #ccc; overflow:hidden; margin:12px; }

However, when I try to center the image in the div by adding display:table-cell and vertical-align properties, the margin stops working and the div goes top left of its parent... Is this a known effect?

new class which margin fails:

.img_holder { width:126px; height:126px; border:1px solid #ccc; overflow:hidden; margin:12px; display:table-cell; vertical-align:middle; }

Answer 1

To get spacing between the cells you might want to use border-spacing:20px;