.grid ajoute la hauteur non désirée

Question

J'ai tout essayé et j'ai cherché ce problème mais je ne peux pas le résoudre.

Il semblerait que .grid ait ajouté 100px supplémentaires qui ne sont pas souhaités et perturbent ma mise en page. Qu'ai-je fait de mal?

montre la hauteur supplémentaire ajouté

Link

1px border Yellowbox: .grid

1px border greenbox: .grid-item

Le CSS:

.grid { 
    border: 1px solid yellow; 
    width: 540px; 
} 
.grid-item { 
    float: left; 
    width: 246px; 
    margin-bottom: 20px; 
    border-top: 1px solid #bababa; 
    padding-top: 30px; 
    border: 1px solid green; 
} 

La JS

$(document).ready(function() { 

     $('.grid').masonry({ 
     itemSelector: '.grid-item', 
     columnWidth: 250, 
     gutter: 35 
     }); 

}); 

Answer 1

Essayez de tester ce code sur tous les navigateurs d'abord. - >>>>http://jsfiddle.net/r6w1j70c/2/

Tous ive ajouté est Jquery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script> 

Si cela fonctionne sur tout votre navigateur, cela signifie que JS Maçonnerie est pas le problème ... est votre codage qui pourrait être déconner il en haut