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

添加font-size: 0;到您#play ul li的 css 属性：

   #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;

}