CODEWITHSUNDEEP
htmlcss
user1740381
user1740381

Reputation: 2199

Css issue - li is getting unknown margin?

I am working on an HTML CSS template, i stuck in a situation in which my list item (li) is getting bottom-margin from somewhere, here is my code:

JSFIDDLE

HTML

<div id="main-4">
    <ul>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-1.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-2.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-3.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-4.jpg" alt="#">
        </li>
    </ul>
</div>

CSS

#main-4 ul li {
    list-style-type: none;
    float: left;
    width: 337px;
}

    #main-4 ul li > img {
        width: 337px;
    }

Upvotes: 1

Views: 102

Answers (1)

vsync
vsync

Reputation: 130195

it's because images do that. give your images vertical-align:bottom and see how it's being fixed:

#main-4 ul li {
    list-style-type: none;
    float: left;
    width: 337px;
}

    #main-4 ul li > img {
        width: 337px;
        vertical-align:bottom;
    }

Upvotes: 3

Related Questions