Estou com um problema relativamente estranho, tenho alguns itens dentro de uma div pai que são gerados dinamicamente com php. Eu listei eles no css para que se exibissem um do lado do outro, como um float, só que usei o display: inline-block para isso. Funciona normal, só que em determinados itens ele apresenta uma estranha margem, o que fazer?
O Código HTML (Lembrando que o conteúdo é gerado por PHP dinamicamente):
<div class="produtos">
<div class="produto">
<img src="#" alt="" />
<div>
<h4><a href="#">Nome do produto</a></h4>
</div>
</div><!-- produto -->
</div><!-- produtos -->
E o código CSS:
.produtos{width:100%; height:auto; text-align:center;}
.produtos .produto{width:240px; height:300px; margin:10px 2px; display:inline-block; border:1px solid #ccc; border-radius:5px;}
.produtos .produto img{width:100%; height:150px; margin:0; padding:20px 0;}
.produtos .produto div{width:100%; height:100px; background-color:#f8f8f8;}
.produtos .produto div h4 a{color:#000;}
Aqui vai um print de como ficou o resultado: