html - 带有内容的图 block 填充不一致

Question

我正在使用 HTML 和 CSS 制作一个简单的平铺 View 。它工作正常，没有任何严肃的内容，看起来也不错，但是如果我添加任何图像或类似的东西，它会立即使它看起来很垃圾(可以找到该站点 here)我做错了什么？我查看了 padding，那个空间里没有任何东西!

我的代码如下:

ul.tiles {
    max-width: 620px;
    height: auto;
}

ul.tiles li {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    background: #FAFAFA;
    z-index: 0;
    margin: 5px 5px 5px 5px;
    transition: all .15s ease-in-out;
    box-shadow: 0 2.5px 5px 0 rgba(0,0,0,.2);
}

ul.tiles li * {
  width: 100%;
  height: auto;
}

ul.tiles li:hover {
    background: #FAFAFA;
    z-index: 100;
    transform: scale(1.0,1.0);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

<div class="row" style="">
    <div class="col-md-9">
        <ul class="tiles">
            <li><img src="//www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></li>
            <li><img src="//pbs.twimg.com/profile_images/602729491916435458/hSu0UjMC.jpg" /></li>
            <li><a href="#">Topic 3</a></li>
            <li><a href="#">Topic 4</a></li>
        </ul>
    </div>
</div>

Answer 1

添加vertical-align:top

ul.tiles li {
    background: #fafafa none repeat scroll 0 0;
    box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 200px;
    margin: 5px;
    position: relative;
    transition: all 0.15s ease-in-out 0s;
    vertical-align: top;/*add this property*/
    width: 200px;
    z-index: 0;
}