html - Thumbnails not displaying correctly

Question

I am new to Neat. i am trying to create a thumbnail grid gallery. Now I have set the grid with no margin and no padding in li but somehow the gap is there between the first row and second row. its the gap between li and the image in it at the bottom. ive marked the li to red to show the gap. can you tell me where am i doing wrong with css. thanks.

here is the css

img {
    max-width: 100%;
    height: auto;
}
body {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
.mainContainer {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mainContainer:after {
    content:"";
    display: table;
    clear: both;
}
.mainContainer .thumblist ul {
    margin: 0;
    padding: 0;
}
.mainContainer .thumblist ul li.block {
    float: left;
    display: block;
    margin-right: 0%;
    width: 25%;
    background-color: red;
}
.mainContainer .thumblist ul li.block:last-child {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n) {
    margin-right: 0;
}
.mainContainer .thumblist ul li.block:nth-child(4n+1) {
    clear: left;
}

And here is the Html

<div class="mainContainer">
<div class="thumblist">
    <ul>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>
    <li class="block"><img src="img\thumb1.jpg" alt=""></li>    
    </ul>
</div>
</div>

i've also uploaded a demo so you can have a look over here. thanks.Demo

Answer 1

您需要为<li>

.mainController .thumbnail ul li.block {
    height:150px;
}