.grid добавляет нежелательную высоту

Question

Я пробовал все и искал эту проблему, но просто не могу ее решить.

Кажется, что .grid добавил дополнительный 100px, что нежелательно и беспорядок с моей компоновкой. Что я сделал не так?

показан дополнительный добавленный высота

Link

1px border yellowbox: .grid

1px border GreenBox: .grid-item

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; 
} 

JS

$(document).ready(function() { 

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

}); 

Answer 1

Попробуйте протестировать этот код на каждом браузере первой. - >>>>http://jsfiddle.net/r6w1j70c/2/

Все ивы добавляемого 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> 

Если он работает на всех ваш браузере, то это означает, что JS масонство не проблема ... это ваше кодирование, который может быть Мессинг его вверх.