RhysO RhysO - 4 months ago 12
CSS Question

Tile padding with content is out of line

I'm working on a simple tile view using HTML and CSS. It's working OK and without any serious content, also looks OK, but if I add any images or the like, it instantly makes it look rubbish (the site can be found here) What am I doing wrong? I've had a look at padding and there isn't anything in that space!

My code is below:



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

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