html - HTML に表示される不要な背景

Question

4つの画像を統合しようとしています。しかし、残念ながら、画像の下部に数ピクセルが埋め込まれています。

ここで問題を見ることができます：

ボーダーやパディングなしですべての画像を閉じたいだけです。

CSS:

    #play {   
        padding: 0px;
        margin: 0px;
    }

    .ui-grid-b img {
       width  : 100%;
       height : auto;
        }


    #play ul {
        border: 0px solid black;       
        margin: 0 auto;
        width: 50%;
        height: 450px;
        float: left;
        padding: 0;
    }

    #play ul li {
        background-image: none;
        list-style-type: none;
    }

     #play ul li.list1 {
        background-color: #ff0000;

    }
    #play ul li.list2 {
        background-color: #00ff00;

    }

HTML:

<div id="play" class="ui-grid-b">
    <ul id="list1">
        <li class="list1">
            <img src="images/img1.jpg" alt="Smiley face">
        </li>
        <li class="list1">
            <img src="images/img3.jpg" alt="Smiley face">
        </li>
    </ul>
    <ul id="list2">
        <li class="list2">
            <img src="images/img2.jpg" alt="Smiley face">
        </li>
        <li class="list2">
            <img src="images/img4.jpg" alt="Smiley face">
        </li>
    </ul>
</div>

Answer 1

' css 属性に追加font-size: 0;します。#play ul li

   #play ul li {
        background-image: none;
        list-style-type: none;
        font-size: 0;  /* <-- the magic */  
    }

ここでの作業: http://jsfiddle.net/HhVQ5/1/

Answer 2

私が理解しているように、liには独自のデフォルトのパディングとマージンもあります。を使用してそれらを削除しようとしています

 #play ul li {
    background-image: none;
    list-style-type: none;
    padding:0;
    margin:0;

}