Hey there! Just playing around on jsfiddle and wanted to share this Destiny-inspired creation:
http://jsfiddle.net/3mfnckuv/3/
If you're familiar with Destiny, you'll see the inspiration haha..
But here are a few questions for you:
1) Any ideas on why there's white space under the image?
2) I'm attempting to place the image and description side by side. Tried wrapping the image in a div and using inline block instead of float. What do you think about this approach?
3) How can I adjust the position of the description div to align it with the top edge of the picture?
4) Currently using margin-left: -4px to remove whitespace caused by inline-block. Is this a good solution?
5) Is setting width and height to 100% on the body and html considered good practice?
<ul class="test-2">
<li>
<div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
<p>Invective</p>
</li>
</ul>
html, body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
.image, p {
display: inline-block;
border: 1px solid black;
}
Appreciate your help!