Lists and Padding

by rtcherry

HTML

<div class="list">
    <ul>
        <li>
            <a href="#">
                <img src="http://lorempixel.com/200/200/"/>
            </a>
        </li>
    </ul>
</div>
<div class="div">
    <div>
        <a href="#">
            <img src="http://lorempixel.com/200/200/"/>
        </a>
    </div>
</div>

SCSS

.list {
    background: #000000;
    height: 100px;
    width: 200px;
    ul {
        display: inline-block;
        overflow: hidden;
        background: #666666;
        height: 100%;
        list-style: none inside none;
        margin: 0;
        max-height: 100%;
        max-width: 100%;
        padding: 0;
        li {
            background: #cccccc;
            margin: 0;
            max-height: 100%;
            max-width: 100%;
            padding: 4px;
            text-align: center;
            a {
                background: #ff0000;
                img {
                    max-height: 100%;
                    max-width: 100%;
                    vertical-align: bottom;
                }
            }
        }
    }
}
.div {
    background: #000000;
    height: 100px;
    margin-top: 15px;
    width: 200px;
    div {
        display: inline;
        overflow: hidden;
        background: #666666;
        height: 100%;
        list-style: none inside none;
        margin: 0;
        max-height: 100%;
        max-width: 100%;
        padding: 4px;
        a {
            background: #ff0000;
            img {
                max-height: 100%;
                max-width: 100%;
                vertical-align: bottom;
            }
        }
    }
}